相关疑难解决方法(0)

可能重复:
CSS - 相等高度列？

我有3个div.

像这样:

<div class="features"></div>
<div class="features"></div>
<div class="features"></div>

他们将充满文字.我不知道多少钱.问题是,它们都是平等的高度势在必行.

我如何使用jQuery(或CSS)找到最高的DIV并将其他两个设置为相同的高度,创建3个相等高度的DIV.

这可能吗？

我有三个元素,我试图在我的布局中对齐.

首先,我有一个div反馈,然后是搜索输入,然后是div元素的建议.

我希望第一个和最后一个元素的宽度为20%,搜索输入的宽度为60%.使用Flexbox我实现了我想要的.

但是有一个功能可以将所有div增加到最高元素.这意味着当弹出搜索结果时,反馈和建议元素的高度会随着搜索div的增加而产生混乱的布局.

有没有一个技巧不增长具有最高元素的div？只是使div(#feedback和#suggestions)具有内容的高度？

#container_add_movies {
  display: flex;
}
#container_add_movies #feedback {
  width: 20%;
  background-color: green;
}
#container_add_movies #search {
  width: 60%;
  background-color: red;
}
#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>
    Feedback
  </div>
  <div id='search'>
    Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>
  </div>
  <div id='suggestions'>
    Suggestions
  </div>
</div>

http://codepen.io/alucardu/pen/PPjRzY

我有3个div包含在第三个.其中一个包含的div向左浮动,另一个向右浮动.我希望2兄弟div总是处于同一高度,但我遇到了这个问题.到目前为止,我只在Firefox中查看该页面,并且在我至少在一个浏览器中使用它之后发现我担心任何跨浏览器问题.

这是标记:

<div id="main-container" class="border clearfix">
    <div id="left-div" class="border">
        ...
    </div>
    <div id="right-div" class="border">
        ...
    </div>
</div>

这是CSS:

#main-container     { position: relative;                             min-height: 500px; }
    #left-div       { position: relative; float: left;  width: 700px; min-height: inherit; }
    #right-div      { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }

.clearfix:after     { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix           { display: inline-block; _height: 1%; clear: both; }
.clearfix           { display: block; clear: both; }
.border …

我目前有两列,其中有另一列.我想要的是让左右列在高度上延伸,因为中间列添加了更多内容.

需要注意的是,我无法为父div设置精确的高度,然后将左右列设置为"height:100%".这是因为中心列中可能只有少量内容,或者很多内容.

如何让你的div一直到达？如何填写父div的垂直空间？如何在不使用背景图像的情况下获得等长的列？

我花了几天时间谷歌搜索和解析代码,以了解如何尽可能简单有效地完成等长列.这是我提出的答案,我想在一个小教程中与社区复制和粘贴样式分享这些知识.

对于那些认为这是重复的人来说,事实并非如此.我受到了几个网站的启发,其中包括http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks,但下面的代码是独一无二的.

我有一个ASP.NET MVC视图,其中包含以下Twitter Bootstrap:

<div class="container">
    <div class="container-fluid header">
        [Header content]
    </div>

    <div class="row-fluid">
        <div class="span9">
            <div class="container-fluid main-content">
                [Main Content]
            </div>
        </div>

        <div id="right-sidebar" class="span3">
            [Right Sidebar Content]
        </div>
    </div>
</div>

我的问题是我的[主要内容]比我的[右侧边栏内容]高得多.由于我的[右侧边栏内容]具有不同的背景颜色,我希望它一直向下到我的页脚(我的[主要内容]的完整高度.)

我尝试设置height: 100%到侧边栏,但在Chrome中没有明显效果.谁能看到如何实现这一目标？

我想在我的css表中使用百分比.不幸的是,它对我不起作用.

这段代码出了什么问题？我应该使用flexbox而不是table吗？

我想用表,因为我想要相同的高度列.

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

我有一个基本的网格系统,非常基本的,它在一个流畅的"行"中并排放入"单元格".我希望两个单元格总是匹配它们的高度,所以它们是相同的.因此,如果一个内容比另一个更多,则另一个扩展以匹配具有更多内容的单元格的高度.

<div class="row">
    <div class="cell1">
        <div class="inner">
            <h2>Cell 1</h2>
            <p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>            
        </div>
    </div>
    <div class="cell2">
        <div class="inner">
            <h2>Cell 2</h2>
        </div>
    </div>
</div>

这里的问题演示:http://jsfiddle.net/QDBff/

嘿，我在一个项目网站上工作，但我遇到了问题，列，

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row-eq-height">
  <div class="col-xs-4 col-md-4">
    <div class="thumbnail">
      <img src="img/seo.png" height="150" width="150">
      <div class="caption">
        <h4 class="text-center">SEO Services</h4><hr class="style-one">
        <h4 class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</h4>
        <div class="text-right">
          <a href="#" class="btn btn-primary" >25$</a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-xs-4 col-md-4 ">
    <div class="thumbnail">
      <img src="img/s2.png" height="150" width="150">
      <div class="caption">
        <h4 class="text-center">Websiite Templates</h4><hr class="style-one">
        <h4 class="text-center">Here we provide you …