html - 当内容增加时，我的内容 div 放错了位置

标签 html css twitter-bootstrap

我使用三个不同的类来区分我的 div。我在这些div里面写了一些内容。当第一行 div 中的内容相同时没有问题，但是当内容不同时，这意味着当那些 div 中的文本与另一个第二行 div 中的文本放错位置时。我还从 bootstrap 中使用 row class 来分隔这两行，但是当文本内容和它们的大小与第一行相同时，输出不像以前那样。

我的代码在下面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Test</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>

    body
    {
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:400;
        color:#fff;
    }
    .main-body
    {
        margin-top:100px;
    }
    .back1, .back2, .back3{padding:15px; margin-bottom:30px;}
    .back1{background:#f1c40f;}
    .back2{background:#2ecc71;}
    .back3{background:#3498db;}

</style>

</head>



<body>

<div class="main-body">

    <div class="container">

    <div class="row">

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back1">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back2">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back3">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back1">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back2">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back3">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>


    </div>    

    </div><!--container closed-->    

</div><!--main-body closed-->    

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>

最佳答案

您必须为每一行创建新的行 div。目前您已将所有 6 个子 div 放在一行中。保持 3 个在一行，另一个 3 个在第二行。下面是更新代码。希望这会有所帮助。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Test</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>

    body
    {
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:400;
        color:#fff;
    }
    .main-body
    {
        margin-top:100px;
    }
    .back1, .back2, .back3{padding:15px; margin-bottom:30px;}
    .back1{background:#f1c40f;}
    .back2{background:#2ecc71;}
    .back3{background:#3498db;}

</style>

</head>



<body>

<div class="main-body">

    <div class="container">

    <div class="row">

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back1">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back2">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back3">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

    </div>
    <div class="row">

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back1">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back2">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>

        <div class="col-sm-4 col-md-4 col-xs-12">

            <div class="back3">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </div>

        </div>


    </div>    

    </div><!--container closed-->    

</div><!--main-body closed-->    

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>

要使所有 div 的高度固定，您可以选择以下两种解决方案之一。它将有助于处理动态文本。 方案一

.back1, .back2, .back3 {
    padding: 15px;
    margin-bottom: 30px;
    min-height: 300px;
}

方案二

.back1, .back2, .back3 {
    height: 300px;
    overflow: scroll;
}

关于html - 当内容增加时，我的内容 div 放错了位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32837903/

上一篇：css - 为 Windows Phone 调试 cordova 应用程序

下一篇：javascript - 如何在 jquery 中附加来自不同长度列表的多个 div？

相关文章：

ruby-on-rails - 将新设计集成到旧的 Rails 应用程序中

html - 变换和缩放不会 overflow hidden 的图像

jquery - 无法滚动到网页中div的底部

javascript - 使用动画将元素从一个父元素移动到另一个父元素

css - 我想使用 CSS 创建箭头形状——请看截图

html - 使用 bootstrap css 的响应式表单

javascript - 附加 HTML 后删除子 div

html - Android webview单选按钮和复选框样式

html - 在 HTML 中使用超链接进行水平和垂直对齐

jquery - Bootstrap 菜单下拉问题

©2024 IT工具网  联系我们