javascript - 我怎样才能水平对齐 div 并且仍然响应

Question

抱歉，这是个愚蠢的问题，但我正在为客户开发网站，但我更像是一名后端人员，对 HTML/CSS/JS 了解甚少

我的问题是，我是否可以将每 2 行放在不同的列中？但在从不同设备查看时仍能响应

澄清一下:每列 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

我只是猜测，因为我不清楚，但我假设您的意思是每行有两个链接，并且您希望它在小视口(viewport)上时不应该挤在一起。将 .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>