长文本会导致div高度出现问题

时间：2018-10-04 08:30:38

标签： html css

我正在创建联系人列表，但是容器的文本长度和高度有些问题。如果以上内容太长，我希望所有.image-container div都应始终位于同一行（每行4个）。在代码段中，尝试按按钮，然后将2个框放在其他框的上方，我希望所有框都位于前2个框的位置。

 $('.add').click(function() {
  $('.addhere').text('This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs');
});
.contact-holder{
    height: 500px;
    width: 605px;
}
.image-container {
    width: 139px;
    float: left;
    min-height: 195px;
    margin: 0em 1%;
    font-size: 15px;
}

.image-container img {
    width: 135px;
    height: 135px;
}

.user-name {
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #464646;
    font-weight: bold;
}

.user-title {
    font-size: 0.8em;
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    color: #464646;
}
.user-mail {
    color: #00536E;
    font-size: 9px;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 1em 0;
    font-size: 1.2em;
    color: #464646;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-holder col-sm-10 col-sm-offset-1">
<button class="add">Add text</button>
        <h2>Departement</h2>
        
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>         
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title addhere">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>  
        
    </div>

2 个答案:

答案 0 :(得分：1)

用flexbox div包装图像容器。 

$('.add').click(function() {
  $('.addhere').text('This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs');
});
.contact-holder{
    height: 500px;
    width: 605px;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.image-container {
    width: 139px;
    float: left;
    min-height: 195px;
    margin: 0em 1%;
    font-size: 15px;
}

.image-container img {
    width: 135px;
    height: 135px;
}

.user-name {
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #464646;
    font-weight: bold;
}

.user-title {
    font-size: 0.8em;
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    color: #464646;
}
.user-mail {
    color: #00536E;
    font-size: 9px;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 1em 0;
    font-size: 1.2em;
    color: #464646;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-holder col-sm-10 col-sm-offset-1">
<button class="add">Add text</button>
        <h2>Departement</h2>

            <div class="wrapper">
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>         
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title addhere">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>  
            </div>
    </div>

答案 1 :(得分：1)

您应该使用Clearfix。我在第4行的第1行添加了带有class clearfix的div父母

为使您了解有关clearfix的更多信息，请尝试阅读以下参考：What is a clearfix?

这是jsfiddle的示例工作链接：https://jsfiddle.net/03zjx24e/

将此添加到CSS

CSS：

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

HTML：

                <!--Newly added clearfix-->
        <div class="clearfix">
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>         
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title addhere">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>            

                                </div><!--closing of clearfix-->

希望对您有帮助，快乐编码！

相关问题
最新问题