当前位置: 首页 > 面试题库 >

如何使两个并排的div保持相同的高度?

廖臻
2023-03-14
问题内容

我有两个div并排。我希望它们的高度相同,并且如果其中之一调整大小,则保持不变。我无法弄清楚这一点。有想法吗?

为了澄清我的困惑问题,我希望两个框的尺寸始终相同,因此如果一个框由于文本放置而增大,则另一个框应与高度匹配。

<div style="overflow: hidden">

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!

    </div>

</div>

问题答案:

flexbox

使用flexbox时,它是一个声明:

.row {

  display: flex; /* equal height of the children */

}



.col {

  flex: 1; /* additionally, equal width */



  padding: 1em;

  border: solid;

}


<div class="row">

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>

</div>


 类似资料:
  • 问题内容: 我有两个未嵌套的div,一个在另一个之下。它们都在一个父div内,并且该父div重复其自身。所以本质上: 我想每对以及彼此相邻。我怎样才能做到这一点? 问题答案:

  • 问题内容: 在下面的代码中,我希望带有“ y”的div将div的高度与3个“ x”相匹配。 需要注意的是内部div是浮动的。 问题答案: 如果您不反对使用jQuery,可以使用EqualHeight,它应该做您想要的

  • 问题内容: 我在容器中有两个div。一个在左边,一个在右边,并排放置。即使内容不同,我如何能够使每个人的身高相等。 例如,右div有很多内容,并且是左div高度的两倍,如何使左div延伸到右div的相同高度? 是否有一些JavaScript(jQuery)代码可以完成此任务? 问题答案: 您 可以 使用jQuery,但是有更好的方法可以做到这一点。 这类问题很多,通常有3个答案… 1.使用CSS

  • 问题内容: 我有2个div并排。我不知道它们的高度,它根据内容而改变。有没有一种方法可以确保它们始终保持相同的高度,即使其中一个拉伸时也只能使用CSS? 我做了一个小提琴来展示。我希望红色和蓝色的div高度相同… 这是CSS: 问题答案: 您可以尝试使用float来代替使用float。但是,您可能会发现某些较旧的浏览器不了解此规则。见下文:

  • 问题内容: 在我的作业中,第三步是调用方法merge来合并list1中的两个列表,以便list1 保持排序。 我编写了代码,但效果不佳,输出显示错误,因为排序很重要 问题答案: 假设两个列表都已排序,则只需要一个循环: 如果未排序,则需要两个循环:

  • 问题内容: 我有一个小问题。我正在尝试使用CSS并排对齐两个div,但是,我希望将中心div放置在页面的水平中央,我通过使用以下方法实现了这一点: 很好 我想将第二个div放置在中心页面换行的左侧,但是尽管可以确定,但我无法使用浮点数来完成此操作。 我想将红色div推向白色div。 这是我当前关于这两个div的CSS,侧边栏是红色div,页面换行是白色div: 问题答案: 如果包裹了div,如下所