Question

是否可以获得此布局：

1 3 5 7
2 4 6 etc..

没有分隔div（我需要一个单一的wordpress循环，如果div被分开，我不知道如何运行它）因为我在父div上使用水平滚动。我尝试使用nth-of-type() or nth-child()结合浮动，清除，显示，到目前为止没有运气

FIDDLE HTML：

<div class="row-horizon">
  <div class="element">
    <h1>Lorem ipsum 1</h1>
  </div>
  <div class="element">
    <h1>Lorem ipsum 2</h1>
  </div>
  <div class="element">
    <h1>Lorem ipsum 3</h1>
  </div>
  <div class="element">

CSS：

.row-horizon {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  width: 57vw;
}

.element {
  float: none;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}



.element:nth-of-type(2) {
  float: left; top:5px; position:relative;}

Answer 1

有点脏，但它可能就足够了。这是来自您的更新Fiddle。

首先删除HTML中的inline-block spaces，例如：

<div class="row-horizon">
    <div class="element">
        <h1>Lorem ipsum 1</h1>
    </div><div class="element">
        <h1>Lorem ipsum 2</h1>
    </div><div class="element">
        <h1>Lorem ipsum 3</h1>
    </div><div class="element">
        <h1>Lorem ipsum 4</h1>
    </div><div class="element">
        <h1>Lorem ipsum 5</h1>
    </div><div class="element">
        <h1>Lorem ipsum 6</h1>
    </div>
</div>

将CSS更改为：

.row-horizon {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    width:57vw;
}

.element {
    display: inline-block;
    /* white-space: normal; */
    vertical-align: top;
    background-color: rgba(13, 13, 13, 0.8);
    height:40%;
    width:330px; /* added width */
    margin-right:20px; /* added a white space width */
}

.element h1 {
    font-size:15; 
    font-family:Arial; 
    padding:50px;
}

.element:nth-child(2n) { /* every second div */
    margin-left:-350px; /* substract .element width + white space width */
    margin-top:200px; /* height of .element + white space in height */
}

使用水平滚动的Div布局（无表格）

1 个答案: