Question

我在处理新网站的显示时出现问题。基本上，所有内容都将显示在2列中，当从较小的屏幕查看时，这将减少到1。

当我向这些框添加内容时，第一个＆＃34;列＆＃34;在第二行上低于第一行＆＃34;行＆＃34;上的第二个元素，我希望它能使我的下一行向下保持其直接位于其上方的元素，而不是最后解析的元素。

以下是我的问题的一个例子：

＆＃13;

body{
  background-color:lightgray;  
}

.box{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  
  width:48%;
  margin:1%;
  padding:10px;
  
  background-color:white;
  
  display:inline-block;
  float:left;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
  <div class="box">
    <h1>Box 1</h1>
    Test content 1
  </div>
  <div class="box">
    <h1>Box 2</h1>
    its a bit longer<br/>
    than the last one<br/>
    <br/>
    its a lot longer<br/>
    than the last one actually<br/>
  </div>
  <div class="box">
    <h1>Box 3</h1>
    its cold and lonely down here :(<br/>
    I want to be with my waifu Box 1<br/>
  </div>
</body>
</html>

＆＃13;

以下是我实际希望它看起来的样子：

如何更改样式以匹配此项？有可能吗？

Answer 1

您可以使用:nth-child()选择器选择所有2n元素并向右浮动。

* {
  box-sizing: border-box;
}
body {
  background-color: lightgray;
}
.box {
  width: 48%;
  margin: 1%;
  padding: 10px;
  background-color: white;
  float: left;
}
.box:nth-child(2n) {
  float: right;
}

<div class="box">
  <h1>Box 1</h1> Test content 1</div>
<div class="box">
  <h1>Box 2</h1> its a bit longer
  <br/>than the last one<br/>
  <br/>its a lot longer
  <br/>than the last one actually<br/>
</div>
<div class="box">
  <h1>Box 3</h1> its cold and lonely down here :(
  <br/>I want to be with my waifu Box 1<br/>
</div>
<div class="box">
  <h1>Box 4</h1> its cold and lonely down here :(
  <br/>I want to be with my waifu Box 1<br/>
</div>

Answer 2

你可以用类似的东西来实现它。

你应该看看css flex和卡布局，如：https://codepen.io/cssgirl/pen/NGKgrM

body{
  background-color:lightgray;  
  display:flex;
  flex-flow: row wrap;
}

.box{
  padding:10px;
  margin:10px;
  background-color:white;
  width: 200px;
}

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
  <div class="box">
    <h1>Box 1</h1>
    Test content 1
  </div>
  <div class="box">
    <h1>Box 2</h1>
    its a bit longer<br/>
    than the last one<br/>
    <br/>
    its a lot longer<br/>
    than the last one actually<br/>
  </div>
  <div class="box">
    <h1>Box 3</h1>
    its cold and lonely down here :(<br/>
    I want to be with my waifu Box 1<br/>
  </div>
</body>
</html>

Answer 3

您可以使用CSS3 :nth-child()选择器

来实现此目的

＆＃13;

body{
  background-color:lightgray;  
}

.box{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  
  width:48%;
  margin:1%;
  padding:10px;
  
  background-color:white;
  
  display:inline-block;
  float:left;
}
.box:nth-child(even){
  float: right;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
  <div class="box">
    <h1>Box 1</h1>
    Test content 1
  </div>
  <div class="box">
    <h1>Box 2</h1>
    its a bit longer<br/>
    than the last one<br/>
    <br/>
    its a lot longer<br/>
    than the last one actually<br/>
  </div>
  <div class="box">
    <h1>Box 3</h1>
    its cold and lonely down here :(<br/>
    I want to be with my waifu Box 1<br/>
  </div>
</body>
</html>

＆＃13;

我如何制作我的内联div＆＃34; nestle＆＃34;相互之间，即使他们的大小不同？

3 个答案: