Question

我目前正在尝试创建一组div。它们中的内容将是动态的，因此我想为每个内容设置一个固定的内容。现在看来每个盒子都有不同的尺寸。我想利用max-width，但我无法成功完成此任务。我希望除了相同大小之外，所有内容的相同行为都与每个.role相同，无论屏幕大小如何。请注意，父container是一个引导程序container。这是我的jsFiddle

编辑：我拍摄的所有div都是相同的大小。理想情况下，如果每个方框都是最大方框的大小（动态内容插入p和headers，那就太棒了。

的index.html

<div class="container">
    <div class="role-list">
    <div class="role">
        <h3>Firefighter - The Best of the best</h3>
        <p>He is a great and I know that he loves his job.
        He is a great and I know that he loves his job
            He is a great and I know that he loves his job
            He is a great and I know that he loves his job

        </p>
    </div>
        <div class="role">
        <h3>Firefighter </h3>
        <p>He is a great and I know that he loves his job</p>
    </div>    
        <div class="role">
        <h3>Firefighter </h3>
        <p>He is a great and I know that he loves his job</p>
    </div>    
        <div class="role">
        <h3>Firefighter - The Best of the best</h3>
        <p>He is a great and I know that he loves his job
             He is a great and I know that he loves his job
            He is a great and I know that he loves his job
            </p>
    </div>   
    </div>
</div>

CSS

.role {
  display: inline-block;
  width: 47%;
  margin: 10px 10px;
  padding: 2%;
  vertical-align: top;
  background: #fff;
  border: 1px solid #ebebeb;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

Answer 1

您应该可以通过向css添加最小宽度来实现此目的。将以下内容添加到CSS中的.role中。您可以将最小宽度设置为您喜欢的任何尺寸。

NUL

为了完成相同大小的框，您需要设置宽度和高度CSS属性。这可能会有点棘手，因为如果内容比大小可以处理的长，那么除非你设置溢出滚动，否则它将拉伸div。

jsFiddle

使用引导容器时，Div没有固定的大小

1 个答案: