Question

我有这个HTML标记，

＆＃13;

<div class="entry">
  <p><a href=""><img src="1.jpg"></a></p>
  <p>Sources: www.example.com</p>
  <p><a href=""><img src="1.jpg"></a></p>
  <p>Sources: www.example.com</p>
  <p><a href=""><img src="1.jpg"></a></p>
  <p>Sources: www.example.com</p>
</div>

＆＃13;

我无法更改html。我想这样做：

| Image | | Image | | Image |

 Sources   Sources   Sources

我试过这段代码：

p:nth-child(odd) {
    float: left;
    width: 260px;
    padding: 10px;
    margin: 5px;
}
p:nth-child(even) {
    display: none;
}

但我不知道如何显示图像的来源。

Answer 1

您可以使用带有order属性的CSS flexbox以特定顺序显示项目而不更改HTML顺序：

＆＃13;

.entry {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.entry > p {
  width: 33%;
}
.entry > p:nth-child(2n+1) {
  order: 1;
}
.entry > p:nth-child(2n+2) {
  order: 2;
}

＆＃13;

<div class="entry">
  <p><a href="#"><img src="http://dummyimage.com/200x100/000/fff"></a></p>
  <p>Sources: www.example1.com</p>
  <p><a href="#"><img src="http://dummyimage.com/200x100/000/fff"></a></p>
  <p>Sources: www.example2.com</p>
  <p><a href="#"><img src="http://dummyimage.com/200x100/000/fff"></a></p>
  <p>Sources: www.example3.com</p>
</div>

＆＃13;

理想情况下，我会更改HTML标记，以便将图像及其源包装在一个元素中。

Answer 2

p {
  display: block;
  float: left;
}

Answer 3

用以下代码替换您的CSS：

p:nth-child(odd) {
float:left;
display:block;
width:260px;
padding:10px;
margin:5px;
}
p:nth-child(even) {
display:none;
}

Answer 4

虽然这可能很耗时，但您应该让您的元素及其层次结构反映出您在页面上所需的布局。例如，您应该在div中包装每个关联的内容，然后您可以将它们中的每一个浮动到左侧以使它们出现在一行中。浮动div时，请确保清除最后一个浮动元素下方的浮动，否则下面的元素将跨越上面的元素。此外，您应该尝试避免将元素包装在其他元素中，只是让它们自动从这些元素继承默认样式。因此，您应该从图像周围删除p标记，并用div替换它们。

HTML：

<div class="entry">
  <div class="item">
    <div class='image'><a href="#"><img src="1.jpg" /></a> </div>
    <p class='sources'>Sources: <a href="#">www.example.com</a></p>
  </div>
  <div class="item">
    <div class='image'><a href="#"><img src="1.jpg" /></a> </div>
    <p class='sources'>Sources: <a href="#">www.example.com</a></p>
  </div>
  <div class='clear'></div>
</div>

CSS：

.entry .item {
  width: 200px;
  float: left;
}
.entry .item .image {
  //whatever styles you want for the image
}
.entry .item .sources {
  //whatever styles you want for the sources
}
.entry .item .
.entry .clear {
  clear: both;
}

在他们之前的兄弟姐妹下面显示交替的项目

4 个答案: