第n個孩子選擇在引導3

我有這個頁面結構第n個孩子選擇在引導3

<div class="pictures-page"> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 


</div>

所有的元素都在這裏留下浮動，我需要的是每一秒鐘的畫面元素浮動權？

我已經嘗試過div：nth-child（奇數），但是然後所有圖片都是右移的，我需要每秒圖片才能浮起來嗎？有簡單的CSS解決方案嗎？

來源

2015-11-03 Miomir Dancevic

下面做你所要求的：

.pictures-page *:nth-child(4n+1) img{float:right;} 
.pictures-page div:nth-child(2n+1){clear:left;}

但我猜你真的想在左側交替和圖像頁面的右邊緣：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title></title> 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<style> 
html, body{ 
    box-sizing:border-box; 
} 
body * {box-sizing:inherit;} 

.pictures-page{width:100%;overflow:hidden;} 

.pictures-page img{max-height:150px width:auto;} 
.pictures-page .row:nth-child(2n+1) .col-md-6:nth-child(1){float:right;text-align:right;} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="pictures-page"> 
<div class="row"> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 
</div> 
<div class="row"> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 
</div> 
<div class="row"> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 
</div> 
<div class="row"> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 
</div> 
<div class="row"> 
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div> 
<div class="col-md-6">TEXT</div> 
</div> 

</div> 
</div> 
</body> 
</html>

來源

2015-11-03 22:19:59 bknights

第n個孩子選擇在引導3

回答

相關問題