Css 引导3中的第n个子选择器_Css_Twitter Bootstrap 3_Css Selectors_Css Float

Css 引导3中的第n个子选择器

css twitter-bootstrap-3

Css 引导3中的第n个子选择器,css,twitter-bootstrap-3,css-selectors,css-float,Css,Twitter Bootstrap 3,Css Selectors,Css Float,我有这个页面结构 <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">

我有这个页面结构

<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的解决方案？？？

以下内容满足您的要求：

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


html，正文{
框大小：边框框；
}
正文*{框大小：继承；}
.pictures页面{宽度：100%；溢出：隐藏；}
.pictures页面img{最大高度：150px宽度：自动；}
.pictures页。行：第n个子项（2n+1）。col-md-6:n子项（1）{float:right；text align:right；}
正文
正文
正文
正文
正文

以下内容满足您的要求：

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


html，正文{
框大小：边框框；
}
正文*{框大小：继承；}
.pictures页面{宽度：100%；溢出：隐藏；}
.pictures页面img{最大高度：150px宽度：自动；}
.pictures页。行：第n个子项（2n+1）。col-md-6:n子项（1）{float:right；text align:right；}
正文
正文
正文
正文
正文