Question

我制作的布局需要在移动屏幕上显示。目前，当我缩小到移动设备或在我的iPhone 5上查看该网站时，其中包含较长文本的div只会遍布整个地方。

由于我将div中的所有内容包装在我称为section0，section1等的div中，我认为设置这些内容的高度会有所帮助，但这没有用。背景会发生变化，但溢出的文本会保持原样。在这些部分是页面容器，但设置高度对这些也没有帮助。

我在这里有点无能为力，因为这个问题只发生在底部3个div。

我的部分是这样构建的;

     <div class="section" id="section3">
     <div class="row">
      <div class="col-lg-6 werkwijze">
            <h1>Lorem Psum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>

            <h1>Lorem Psum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>

  </div>
 </div> <!-- end col -->
</div> <!-- end row -->
<div class="row">
    <div class="col-lg-5 botlogo">
    <div class="left"><img src="css/images/logo4.png"></div><div class="right"><h3>LOREM IPSUM</h3><h4>dolor sit amet</h4></div>
    </div><!-- end col -->
</div> <!-- end row -->
</div> <!-- end sec -->

我将这些样式用于各个部分;

.page_container {
        height:100% !important;
        display:block;
    }
#section3{
        background: none;
        border-bottom: 2px solid #8f8f8f;
        height:100%;
    }

有6个部分（0-5），第3部分开始出错。

我试图添加一个小提琴，但由于某种原因，我无法重现问题，我无法分享原始网站。 http://jsfiddle.net/MgcDU/我希望有人认识到这个问题并能帮助我。

Answer 1

根据您发布的代码段，您有一个额外的</div>可能会导致您的问题（我在下面放了一个箭头）：

     <div class="section" id="section3">
     <div class="row">
      <div class="col-lg-6 werkwijze">
            <h1>Lorem Psum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>

            <h1>Lorem Psum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>

  </div>   <------------------------- This one seems like an extra
 </div> <!-- end col -->
</div> <!-- end row -->
<div class="row">
    <div class="col-lg-5 botlogo">
    <div class="left"><img src="css/images/logo4.png"></div><div class="right"><h3>LOREM IPSUM</h3><h4>dolor sit amet</h4></div>
    </div><!-- end col -->
</div> <!-- end row -->
</div> <!-- end sec -->

缩放到移动设备时，文本会从div中流出

1 个答案: