Question

我想为明细的内容列表创建一个布局，如下所示：

每个项目都是一个包含图像和文本块的容器。

我试图使用nth-child并根据它是奇数还是偶数子设置不同的css浮点值，但是你不能使用第n个子选择器设置子属性。

HTML：

<div class="flex-container">
    <div class="media-container ">
        <img src="img/image.png">
    </div>
    <div class="text-container">
        <div class="titles">
            <h2>Title #1</h2>
        </div>
        <p>lots of words</p>
    </div>
</div>
<div class="flex-container">
    <div class="media-container ">
        <img src="img/image.png">
    </div>
    <div class="text-container">
        <div class="titles">
            <h2>Title #1</h2>
        </div>
        <p>lots of words</p>
    </div>
</div>
<div class="flex-container">
    <div class="media-container ">
        <img src="img/image.png">
    </div>
    <div class="text-container">
        <div class="titles">
            <h2>Title #1</h2>
        </div>
        <p>lots of words</p>
    </div>
</div>

CSS：

.flex-container {
    width: auto;
    margin: 10px auto;
    padding: 0 15px;
    display: inline-flex;
}
.flex-container:nth-child(odd) {
    .media-container {
        float: left;
    }
    .text-container {
        float: right;
    }
}

.flex-container:nth-child(even) {
    .media-container {
        float: right;
    }
    .text-container {
        float: left;
    }
}

.media-container {
    position: relative;
    display: inline-block;
}

.media-container img {
    width: 100%;
    height: auto;
}

.text-container {
    width: 30%;
    margin: 0 10px;
    align-self: center;
    position: relative;
    display: inline-block;
}

使用CSS创建此布局的最简单/最新解决方案是什么？

Answer 1

看看这个：

.item {
  width: 305px;
  height: 70px;
  background: black;
  margin: 5px;
  padding: 5px;
}

.item .title {
  width: 200px;
  height: 70px;
  background: crimson;
}


.item .img {
  width: 100px;
  height: 70px;
  background: #09f;
}

.item:nth-child(even) .img {
  float: right;
}
.item:nth-child(even) .title {
  float: left;
}

.item:nth-child(odd) .img {
  float: left;
}
.item:nth-child(odd) .title {
  float: right;
}

<div class='item'>
  <div class='title'></div>
  <div class='img'></div>
</div>
<div class='item'>
  <div class='title'></div>
  <div class='img'></div>
</div>
<div class='item'>
  <div class='title'></div>
  <div class='img'></div>
</div>

Answer 2

这样的事情：

使用＆＃34;行＆＃34;上的nth-child flex-containers并替换flex-direction。

＆＃13;

.flex-container {
  padding: 0 15px;
  display: flex;
  width: 80%;
  border: 1px solid grey;
  margin: 1em auto;
}
.flex-container:nth-child(odd) {
  flex-direction: row;
}
.flex-container:nth-child(even) {
  flex-direction: row-reverse;
}
.media-container img {
  width: 100%;
  height: auto;
}
.text-container {
  width: 30%;
  margin: 0 10px;
}

＆＃13;

<div class="flex-container">
  <div class="media-container ">
    <img src="http://www.fillmurray.com/300/200">
  </div>
  <div class="text-container">
    <div class="titles">
      <h2>Title #1</h2>
    </div>
    <p>lots of words</p>
  </div>
</div>
<div class="flex-container">
  <div class="media-container ">
    <img src="http://www.fillmurray.com/300/200">
  </div>
  <div class="text-container">
    <div class="titles">
      <h2>Title #1</h2>
    </div>
    <p>lots of words</p>
  </div>
</div>

＆＃13;

Answer 3

是否有必要显示：inline-flex？如果你把它改成内联块，我相信你会得到你想要的显示器：

.flex-container {
    display: inline-block;
    ...
}

https://jsfiddle.net/4rcdqy4f/

Answer 4

您可以使用Javascript querySelectorAll() method。然后，循环遍历项目列表，并根据它是奇数还是偶数添加特定的CSS属性。

我如何替换我的内容的浮动？

4 个答案: