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 。

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

1 个答案: