Question

我正在开发一个生成动态内容并在浮动div上显示它们的应用程序。每个div占用页面宽度的49％。我遇到的问题是div的高度因内容而异。

我要做的是让同一行的div具有相同的高度。有什么建议吗？

＆＃13;

.item {
    background: #c4c4c4;
    width: 49%;
    border: 1px solid black;
    float: left;
}

＆＃13;

<div id="container">
    <div class="item">
        Test
    </div>
    <div class="item">
        Hello.
        Sample <br>
        Content <br>
    </div>
    <div class="item">
        Test<br>
        Sample Content
    </div>
    <div class="item">
        Test
    </div>
</div>

＆＃13;

Answer 1

使用CSS3 flexbox使#container适应灵活的盒子布局。

flex-wrap的默认值为nowrap，因此它在一行中对齐。使用flex-wrap: wrap根据商品的宽度创建多行。

当前对Flexbox的浏览器支持非常好：Can I use Flexbox?

＆＃13;

#container {
  display: flex;
  flex-wrap: wrap; /* Wrap after the items fill the row */
  
  /* Safari specific rules */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
}
.item {
  background: #c4c4c4;
  border: 1px solid black;
  width: 49%;
}

＆＃13;

<div id="container">
  <div class="item">
    Test
  </div>
  <div class="item">
    Hello. Sample
    <br>Content
    <br>
  </div>
  <div class="item">
    Test
    <br>Sample Content
  </div>
  <div class="item">
    Test
  </div>
</div>

＆＃13;

Answer 2

在包含div上使用display：table，并在“table cell”div上显示：block。

Answer 3

另一个答案涉及在CSS中使用display：table属性。它类似于表脚手架，但允许使用CSS更灵活，并且比flexbox具有更多的浏览器支持。

HTML：

source 'https://rubygems.org'


gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'devise', '~> 3.4.1'
gem 'toastr-rails'

gem 'activeadmin', github: 'activeadmin'

gem 'paperclip', '~> 4.2.1'

gem 'friendly_id', '~> 5.1.0'

gem 'active_admin-sortable_tree', '~> 0.2.1'

gem 'kaminari', '~> 0.16.3'

gem 'stripe', :git => 'https://github.com/stripe/stripe-ruby'


gem 'mandrill-api', '1.0.52', require: 'mandrill'


gem 'redcarpet', '~> 3.2.3'
gem 'coderay', '~> 1.1.0'


gem 'rails', '4.2.0'

gem 'sqlite3'

gem 'sass-rails', '~> 5.0'

gem 'uglifier', '>= 1.3.0'

gem 'coffee-rails', '~> 4.1.0'

gem 'jquery-rails'

gem 'turbolinks'

gem 'jbuilder', '~> 2.0'

gem 'sdoc', '~> 0.4.0', group: :doc

group :development, :test do
  gem 'byebug'
  gem 'web-console', '~> 2.0'
  gem 'spring'
end

CSS：

<div id="container">
    <div class="row">

        <div class="item">
        Test
        </div>
        <div class="item">
        Hello.
        Sample <br>
        Content <br>
        </div>
    </div>

    <div class="row">
        <div class="item">
        Test<br>
        Sample Content
    </div>
        <div class="item">
            Test
        </div>
    </div>
</div>

小提琴： http://jsfiddle.net/q5jyfuy6/

Answer 4

您可以在.item类中添加 height：40px; ，以使div的高度与内容无关。

.item {
    background: #c4c4c4;
    width: 49%;
    border: 1px solid black;
    float: left;
    height:40px;
}

使同一行上的div具有相同的高度 - 动态内容

4 个答案: