Question

我有这个页面结构

    chr.list    positions   ref alt file1.depth file1.freq  file1.sum   file1.min.prop  file2.depth file2.freq  file2.sum   file2.min.prop  file3.depth file3.freq  file3.sum   file3.min.prop
chr1    12428   C   a   NA  NA  NA  NA  NA  NA  NA  NA  NA  NA  NA  NA  
chr1    12428   C   c   NA  NA  NA  NA  NA  NA  NA  NA  52  1   18  NA  
chr1    12428   C   g   52  2   4   0.5 NA  NA  NA  NA  52  2   4   0.5
chr1    12428   C   t   NA  NA  NA  NA  52  2   16  0.18    NA  NA  NA  NA

这里的所有元素都是左浮动的，我需要的是每隔一个图像元素浮动吗？

我试过div：nth-child（奇数）但是然后所有的图片都浮动了，我需要每隔一张图片浮动吗？是否有简单的CSS解决方案？

Answer 1

以下是你所要求的：

.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>

Bootstrap 3中的第N个子选择器

1 个答案: