html - 如何使响应式两个内联块div

我的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整体缩小？

最佳答案

为了使这两个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。

注意：inline（-block）元素之间有一个空格。您应该删除它以防止意外的问题。您可以参考my answer here。