html如何让兄弟显示错误,HTML/CSS设置div来兄弟-优快云博客

的高度我已经包含在第三2分div的。其中一个被包含的div向左漂移，另一个向右漂移。我希望2兄弟div始终保持在同一个高度，但是我有这个问题。到目前为止，我只在Firefox浏览页面，并且认为在使用至少一个浏览器工作后，我会担心任何跨浏览器问题。HTML/CSS设置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 { border: solid 1px #000; }

如果#left-div含量大于500px长，#right-div不扩大相匹配。在我试过的一个例子中，Firefox表示#main-container的计算样式高度为804px，#left-div的计算样式高度为800px，#right-div的计算样式高度为586.2px，因为它已扩展以适合自己的内容。

我明白我可能要对这个错误的方式，如果这是一个重复的问题，那么我很抱歉，但我不能肯定什么搜索下。

有人说了''？ –

2010-04-26 17:11:09

Pure css，no。但是，根据Pekka的建议，您可以使用'table'，或者如果您不介意使用它，则使用Javascript。 –

2010-04-26 17:18:11

表格布局？ *不寒而栗* –

2010-04-26 17:18:17

回答

我可以机架我的大脑所有我想要的，但我认为这真的可以只用表的行为，即使用

我会去的表。

随意证明我错了，并张贴一个健全的CSS的解决方案，我会很高兴！

2010-04-26 17:15:16

IE7也出来了，用“display：table” –

2010-04-26 17:22:02

@tom youre right，cheers。编辑。 –

2010-04-26 17:33:23

我真的结束了与JavaScript解决方案......该页面已经加载jquery，所以它是微不足道的添加代码来调整div高度......谢谢！ –

2010-04-28 13:57:38

我认为你有以下选择：

人造列 - 使用的div容器重复的背景图像创建等高

的外观使用表

使用JavaScript来调整DIV高度

使用JavaScript来对CSS的支持添加到非兼容的浏览器

2010-04-26 17:19:07

tom

我用人造色谱柱： http://matthewjamestaylor.com/blog/equal-columns-cross-browser-css-no-hacks –

2010-05-28 15:03:07

为了要用HTML和CSS来使用div，你需要使用JavaScript来检查它们的高度，然后改变它来匹配。

如果你不想使用JavaScript，和你的网站有一个特别的设计，在你的第三个格，你可以给它一个重复-Y背景图像，将扩大为两个div的人做。例如，假设你的两个div有一个蓝色背景，而你的第三个div有一个灰色背景。删除蓝色背景并使用蓝色和灰色创建可重复的图像，并将该图像放置在第三个div上。这样，随着它的扩展，它会出现两个div。

2010-04-26 17:20:29

Braxo

这将允许右div的高度始终是左侧为左的增长动态基于内容，但正确的永远不会比最小高度较大，如果左边有更少的内容，这可能是你可以接受的：

Matching Size Divs

#main-container { position:relative; min-height:500px; }

#left-div { width:700px; min-height:500px; }

#right-div { position:absolute; margin-left:700px; width:248px; top:0px; bottom:0px; }

...

2010-04-26 17:47:13

David

我认为这是可以通过同时指定的div(即左格&右格)高度为100％实现。这样，如果没有为html/css指定容器div的高度，那么它们将占用容器div的高度&，那么容器div也会展开以适应其子元素。我知道它很晚，但它可能会为你节省剧本。

2011-02-18 22:22:16

也这么认为，但这在我的情况下不起作用。似乎100％没有成功计算出父母的身高。 –

2017-08-20 09:06:45

即使现在这么多年后你的评论是正确的，％高度不会计算。当你认为它会有用时会感到羞愧。 –

2017-10-15 09:35:51

，如果没有足够的空间，他们会叠加。确保包含这两个div的宽度足以让它们两者都...如果你删除它们的宽度进行测试，我敢打赌它会起作用。

2011-03-24 13:27:48

trgraglia

你应该问自己的第一件事是 - 为什么你需要他们在同一高度？是因为：

你想要背景是相同的大小？

中间的边框是一样的高度？

还是有上需要内嵌在其他分区的底部显示底部的一些内容？

1)如果你想要的背景是相同的大小，那么我劝你CSS样式父格，在最坏的情况 - 所以它适合编辑的背景图像。随着CSS2您可以定位的背景容易

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center;

}

2)每当我在你的问题绊倒，我需要中心边界是相同的高度。解决方案很简单 - 将边框样式应用于最长的DIV。

3)将这两个内容合并到第三个兄弟DIV，如果你不能，那么你将需要JavaScript。或者Pekka说 - 如果你不关心IE，可以使用display: table。

2012-01-06 07:54:07

我正在处理中心边界问题，但是任何一个Div的内容都很灵活。我的解决方案是设置border-right(左div)和border-left(右div)，然后将右div的margin-left设置为-1px。这种方式要么可以是最长的，边界将重叠。 –

2014-06-22 17:28:44

这周我就遇到了这个问题好几次，这个话题是我来到找到一个具体的答案最接近的。这是@ Pekka对那些需要更多继续的人的回应的扩展，我当然这样做。

例如HTML：

Type

Lorem ipsum dolor sit amet, at assum gubergren his,

ex iudicabit dissentiunt intellegebat has. Ne odio detraxit

instructior vim. Fugit velit consetetur an eos.

Ea suas veri mnesarchum mel.

例如CSS：

.view-table

{

display:table;

width:100%;

}

.view-row

{

display:table-row;

}

.view-row > div

{

display: table-cell;

}

.view-name

{

text-align:right;

background-color: lightblue;

}

.view-type

{

background-color: pink;

}

2015-02-11 21:32:04

将包含div的位置设置为：relative，然后将其中一个内部div设置为绝对位置，以允许另一个“未设置”div来有效控制两者的高度。

.container {

position: relative;

}

.main-content {

width: 80%;

margin-left: 20%;

height: 300px;

background-color: red;

}

.secondary-content {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 20%;

overflow-y: scroll;

}

也可以做到这一点，也许使用flexbox更容易，但它有一些浏览器支持问题。

2015-04-27 13:56:00

jgkingston

什么是Flexbox方式？浏览器支持现在很好.. –

2017-06-20 21:13:12

这有点超出范围，但我有一个讨厌的Javascript解决方案。

HTML：

的Javascript(使用jQuery)：

$(document).ready(function() {

$(window).on('resize', function() {

$('[copy-size]').each(function() {

var copyEl = $($(this).attr('copy-size'));

var targetEl = $(this);

targetEl.width(copyEl.width() + 'px');

targetEl.height(copyEl.height() + 'px');

});

2017-11-27 20:49:54

hawaii