Css结合div的技巧

有没有办法把三个div连在一起

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

你好 世界！ 我们在这里需要的是以这种方式呈现代码：

HelloWorld

我尝试使用float:left-on-LeftDiv、CenterDiv和RightDiv，但是css也会影响主容器。我还需要在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!

你好 世界！ 跨距之间也不应该有空格，因为大多数浏览器都会在跨距之间显示一个空格…=）

---

（回答供将来参考）

您可以将“mainContainer”的所有子div如下图所示向左浮动，然后您可以根据需要设置高度和宽度要求

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

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

#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. */
}

---

您可以像下面这样将“mainContainer”的所有子div向左浮动，然后您可以根据需要设置高度和宽度要求

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

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

#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之前就不会有“换行符”

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

---

请尝试

goog inline block

闭包库中定义的类-据说涵盖所有主要浏览器

您可以使用display inline block，这样在div之前就不会有“linebreak”

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

---

请尝试

goog inline block

of closure library中定义的类-据说涵盖了所有主要浏览器

我不能使用float:left，因为这样会显示代码：Hello World。无论如何，谢谢。只要它被包装在主容器中，它就不应该长。确实需要添加两个空div，因为LeftDiv的背景图像像“（“而RightDiv像a”）”；我希望代码呈现的是“（textbox）”；整个世界都将显示Hello（文本框）世界=（我不能使用float:left，因为这样会呈现代码：Hello World。无论如何，谢谢。只要它包装在mainContainer中，就不应该这样做。确实需要添加两个空div，因为LeftDiv的背景图像类似于“（（“而RightDiv类似于a”）”；我希望代码呈现的是“（textbox）”；整个系统将显示Hello（textbox）World…=（内联块未在较旧的浏览器上实现…=（嗯，你说得对…我刚刚搜索并找到了有关主题的内容。div与display:inline块不兼容，但此答案有帮助。=）内联块未在较旧的浏览器上实现=（嗯，你说得对……我刚刚搜索并找到了有关主题的内容。div与display:inline block不兼容，但这个答案有帮助。=）LeftDiv和RightDiv都有意保留为空，这样我就可以为它们使用背景图像。LeftDiv和RightDiv都有意保留为空，这样我就可以为它们使用背景图像。