Css技巧联合divs

2018-07-02 00:42:06

有没有办法让三个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

我试图使用float：留在LeftDiv，CenterDiv和RightDiv，但是CSS也影响mainContainer。我还需要在CSS上设置LeftDiv和RightDiv的高度和宽度 ，但是我不能在没有浮动的情况下完成。

提前致谢。

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

与显示divs：内联块不按预期工作。但跨越了。

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

跨度也不应该在它们之间留有空间，因为大多数浏览器都会在它们之间使用空格来呈现它们。=）

（回答供将来参考）

你可以使用display inline-block，这样divs之前不会有“linebreak”

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

尝试关闭库中的goog / demos / css / common.css中定义的goog-inline-block类 - 应该涵盖所有主要浏览器

你可以像下面一样将所有“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. */
}

链接地址: http://www.djcxy.com/p/89289.html

上一篇: Css trick to conjoin divs

下一篇: How do I get rid of white spaces between spans without manipulating the HTML?