インラインdivを互いに異なるサイズにしても、どのようにして "nestle"を互いに作ることができますか？

私が取り組んでいる新しいウェブサイトの表示に問題があります。基本的には、すべてのコンテンツが2列で表示され、小さい画面から見ると1になります。インラインdivを互いに異なるサイズにしても、どのようにして "nestle"を互いに作ることができますか？

これらのボックスにコンテンツを追加すると、2番目の行の最初の「列」は最初の「行」の2番目の要素よりも低くなります。最後に解析された要素ではなく、そのすぐ上の要素。

ここに私の問題の例です：

を、私はこれに合わせて、スタイルを変更するにはどうすればよい：

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; 
 
}

<!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>

は、ここで私は実際にはそれが見てみたい方法です？出来ますか？

出典

2016-11-10 James Trotter

: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>

出典

2016-11-10 14:14:51

あなたはそのようなもので、それを達成することができました。

あなたはフレックスCSSに見ている必要があり、カードがそこのようなレイアウト：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>

出典

2016-11-10 14:26:27 Paul

あなたはCSS3 :nth-child()セレクタ

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; 
 
}

<!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>

を使用することによって、これを達成することができます

出典

2016-11-10 16:55:52 Abk

インラインdivを互いに異なるサイズにしても、どのようにして "nestle"を互いに作ることができますか？

答えて

関連する問題