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

CSS并排div的自动等宽

陆卓
2023-03-14
问题内容

我有一个父div,其中将包含2或3个子div。我希望子div自动采用相等的宽度。

谢谢


问题答案:

这不是不可能的。使用甚至还不是特别困难display: table

该解决方案将在现代浏览器中运行。在IE7中将无法使用。

CSS:

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}

HTML:

<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
    <div id="three">three</div>
</div>


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

  • 问题内容: 如何通过CSS(级联样式表)为一个页面而不是整个页面自定义滚动条? 问题答案: 我认为整合有关滚动条,CSS和浏览器兼容性的最新信息会有所帮助。 滚动条CSS支持 当前,没有跨浏览器的滚动条CSS样式定义。最后,我在W3C文章中提到了以下内容,并于最近进行了更新(2014年10月10日): 某些浏览器(IE,Konqueror)支持非标准属性“ scrollbar-shadow-col

  • 问题内容: 如何使div的“左”和“右”看起来并列? 我知道我可以在它们上面使用float:left,这将起作用…但是在此处的第5和第6步中,那个家伙说这是可能的,不过我无法正常运作… 码: 问题答案: 不使用s 时的常用方法是使用: 不过,请注意其局限性:第一个块之后还有一个额外的空间- 这是因为这两个块现在基本上是元素,例如和,所以两个计数之间的空格。这可能会破坏您的布局和/或看起来不太美观,

  • 问题内容: 鉴于HTML 呈现为 我的问题: 有没有一种方法可以通过仅使用CSS来呈现它,而无需更改HTML部分。 问题答案: 它可能不完全符合您的要求,但请看一下这个问题: CSS将div定位在另一个div的上方,而在HTML中却没有按照该顺序排列 基本上,您必须使用Javascript才能以任何方式使其可靠。

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

  • 问题内容: 我希望能够单击鼠标并将其保持在div内并移动其背景。在Google上搜索了很多内容,却没有找到我想要的。 问题答案: 好吧,让它起作用。我想我可以解决所有问题了: 最终的jQuery有界限 原始答案 HTML CSS jQuery