Question

对不起，这是一个愚蠢的问题，但我正在为客户开发一个网站，但我更多的是一个后端人，并且在HTML / CSS / JS中知之甚少

我的问题是，无论如何我可以在不同的列中创建每两行吗？从不同的设备查看时仍然保持响应

只是澄清：每列2行

这里是jfiddle链接http://jsfiddle.net/38hhwf2f/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我只是猜测，因为我不清楚，但我认为你的意思是你想要每行两个链接，并且你希望它在一个小视口上不应该挤在一起。将.extra_wrapper更改为无序列表，并将col2更改为li（无类）。

DEMO：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>

如何水平对齐div但仍然具有响应性

1 个答案: