如何在水平方向上對齊div卻仍然保持響應

Question

抱歉，這是一個愚蠢的問題，但是我正在為客戶開發網站，但是我更多地是后端人員，並且對HTML / CSS / JS幾乎一無所知

我的問題是，無論如何我是否可以在不同的列中每隔兩行寫一行？ 但從其他設備查看時仍保持響應

只需澄清一下：每列2行

這是實際的設計http://prntscr.com/4ypwh1

這是jfiddle鏈接http://jsfiddle.net/38hhwf2f/

 .wrapper, .extra_wrapper { overflow: hidden; } .col2 { color: #363335; } h5 { font-family: 'Open Sans', sans-serif; color: #5b6a7f; font-weight: 600; } .fleft { float: right; width: 30%; margin-top: 1.4em; margin-right: 18px; margin-bottom: 0; } .img_inner { max-width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin-top: 4px; margin-bottom: 20px; } 

 <img class="img_inner fleft noresize" alt="" src="http://placehold.it/110x109"> <div class="extra_wrapper"> <div class="col2"><h5>Hello user</h5></div> <div class="col2"><a href="#">Something</a> 246</div> <div class="col2"><a href="#">Nothing</a> 0</div> <div class="col2"><a href="#">What</a> 4</div> <div class="col2"><a href="#">Placeholder</a> 0</div> <div class="col2"><a href="#">Watcha looking</a> 0</div> <div class="col2">Somewhere</div> </div> 

Answer 1

我只是在猜測，因為我不清楚，但是我假設您的意思是每行要兩個鏈接，並且當它在小視口中時不應該擠在一起。 將.extra_wrapper更改為無序列表，並將col2更改為li（無類）。

演示： http : //jsfiddle.net/2gpccsbk/1/

ul.extra_wrapper {list-style:none;margin:0;padding:0;}
ul.extra_wrapper a {color:#363335;}

@media (min-width:600px) {
  ul.extra_wrapper li:not(:first-child):not(:last-child) {
      display:inline-block;
      width:48%;
   }
}

HTML：

<ul class="extra_wrapper">
        <li><h5>Hello user</h5></li>
        <li><a href="#">Something</a> 246</li>
        <li><a href="#">Nothing</a> 0</li>
        <li><a href="#">What</a> 4</li>
        <li><a href="#">Placeholder</a> 0</li>
        <li><a href="#">Watcha looking</a> 0</li>
        <li>Somewhere</li> 
</ul>