Question

有没有办法可以将三个div组合在一起？

Hello
<div class="mainContainer">
    <div class="LeftDiv"></div>
    <div class="CenterDiv">
        <input id="txtTest" type="text"/>
    </div>
    <div class="RightDiv"></div>
</div>
World!

我们需要的是以这种方式呈现代码：

Hello<*LeftDiv*><*CenterDiv with the textbox*><*RightDiv*>World

我尝试在LeftDiv，CenterDiv和RightDiv上使用float：left但css也会影响mainContainer。我还需要在CSS上设置LeftDiv和RightDiv的高度和宽度，但是如果没有浮动，我就无法做到。

提前致谢。

编辑：添加问题 - 当LeftDiv，CenterDiv和RightDiv浮动左侧时，为什么mainContainer会受到影响？我只想让三个内部div结合而不影响父div的行为......

带显示的div：内联块不按预期工作。但跨度确实如此。

Hello
<span class="mainContainer">
    <span class="LeftDiv"></span><span class="CenterDiv">
        <input id="txtTest" type="text"/>
    </span><span class="RightDiv"></span>
</span>
World!

跨度也应该没有空格，因为大多数浏览器都会在它们之间用空格渲染它们... =）

（已回复以供将来参考）

Answer 1

你可以使用display inline-block，这样在div之前就没有“linebreak”了

div.mainContainer, div.mainContainer div
{
  display:-moz-inline-stack; /* for gecko */
  display: inline-block;
}

在封闭库的goog/demos/css/common.css中定义的goog-inline-block类 - 据说涵盖了所有主流浏览器

Answer 2

你可以像下面那样漂浮“mainContainer”的所有子div，然后你可以随意设置高度和宽度要求。

#mainContainer > div
{
    float:left;
}
#LeftDiv
{
    height:100px;
    width:100px;
    background-color:red;
}
#RightDiv
{
    height:100px;
    width:100px;
    background-color:green;
}

嗯，如果您的左右容器仅用于背景图像，您可以考虑将其设置为一个图像并将其应用于mainContainer，

#mainContainer
{
    background-image:url(theimage.jpg);
    padding-left:100px; /*The amount of the image to the left */
    padding-right:100px; /* the amount of the image to the right. */
}

联合div的Css技巧

2 个答案: