html - 如何制作响应式两个内联 block div

Question

我的 HTML:

<div class="sameline">       
   <div class="same_vertical">       
    <div class="textline">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget  
      porttitor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc 
      eget  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget            porttitor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc           eget  psum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget  
      porttitor Lorem  porttitor
      porttitor
    </div> 
   </div><!--same_vertical-->        


   <div class="same_vertical">       
    <div class="textline">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget  
      porttitor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc 
      eget  psum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget  
      porttitor Lorem  porttitor
    </div> 
   </div><!--same_vertical--> 
 </div> <!--sameline-->

我的 CSS:

.sameline {
    text-align:left;
    max-width: 1105px;
    margin:0 auto;  
}
.same_vertical {
    display:inline-block;
    vertical-align: top;
    margin-left: 20px;
    margin-top:-7px;
    margin-bottom:100px;
    max-width: 530px;
}

.textline {
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #CCC; 
    padding-top:10px;   
    color: #626262;
    font-size: 11px;
    line-height: 1.5em;
    font-family: Verdana, Geneva, sans-serif;
    text-align: justify;
}

jsfiddle:http://jsfiddle.net/P6Umg/

我的问题是我无法使 .sameline 响应；我的意思是，每次我缩小浏览器窗口时，第二段文本都会落在第一段上方，而不是同时缩小它们。我认为它的行为类似于具有最大宽度的单个 div。我可以通过哪种方式强制整个 .sameline 收缩？

Answer 1

为了让这两个 inline-block 元素彼此相邻，您应该为 width 和 left-margin 使用百分比值属性，如下:

.sameline {
    max-width: 1105px;
    margin:0 auto; 
    text-align: center;
}

.same_vertical {
    display:inline-block;
    vertical-align: top;
    margin-top:-7px;
    margin-bottom:100px;
    margin-left: 5%;
    width: 45%;
}

 /* remove left margin for the first column */
.sameline :first-child {margin-left: 0;}

WORKING DEMO .

注意:内联( block )元素之间有一个空白。您应该删除它以防止出现意外问题。可以引用 my answer here .