我无法想象如何在CSS中选择元素。
<div class="text">
<img src="./img1.jpg">
<p>Lorem</p>
</div>
<br>
<div class="text">
<img src="./img2.jpg">
<p>Lorem</p>
</div>
如何选择文本div中的每个第二个图像?我希望第一个向左浮动,第二个向右浮动。无论我尝试什么,他们都向左浮动。我可以理解奇数选择器,只需选择它们。
img:nth-of-type(even){
float: right;
}
img:nth-of-type(odd){
float: left;
}
答案 0 :(得分:1)
首先,id
是唯一标识符,每页只能使用一次。您最好将其更改为class
。在此示例中,<br>
标记是不必要的,您可以使用css设置任何边距:
<div class="text">
<img src="./img1.jpg">
<p>Lorem</p>
</div>
<div class="text">
<img src="./img2.jpg">
<p>Lorem</p>
</div>
然后,每个奇数块和偶数块内的图像可以设置为:
.text:nth-child(even) > img {
float: left;
}
.text:nth-child(odd) > img {
float: right;
}
答案 1 :(得分:0)
在您的标记中,它将是:
div {
overflow: hidden;
}
div:nth-of-type(even) img {
float: right;
}
div:nth-of-type(odd) img {
float: left;
}
<div>
<img src="https://www.allaboutbirds.org/guide/bbimages/aab/images/blue-winged-warbler.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div>
<img src="https://www.allaboutbirds.org/guide/PHOTO/LARGE/american_goldfinch_glamour12.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
并删除<br>
和两个具有相同值的id属性。
答案 2 :(得分:0)
首先,图像全部浮动到左侧,因为每个图像都是其容器中的第一个类型。您真正希望每个奇数/偶数 div 中的图像向左/右浮动:
.text:nth-of-type(even) img{ float: right; }
.text:nth-of-type(odd) img{ float: left; }
您还需要清除浮动,以便div正确堆叠。您可以使用浮动元素容器上的clearfix解决方案来执行此操作,例如
.text:after {
content: "";
display: table;
clear: both;
}
工作示例:
/* alternate the display between odd & even containers */
.text:nth-of-type(even) img{
float: right;
}
.text:nth-of-type(odd) img{
float: left;
}
.text {
margin-bottom: 20px;
}
/* clearfix to make each container fully contain its floated elements */
.text:after {
content: "";
display: table;
clear: both;
}
/* for testing so we can see where image would be */
img { height:100px; width:100px; background: #ccc;}
.text { background:#eee;}
<div class="text">
<img src="./img1.jpg">
<p>Lorem</p>
</div>
<div class="text">
<img src="./img2.jpg">
<p>Lorem</p>
</div>
当然,不要使用相同的ID,因为每个人都指出了!