Question

我有一个包含3'浮动'div的div。包含div有一行文字。三个浮动内部div也有一行文字。

当我为最外面的包含div指定文本对齐中心时，三个嵌套的div首先出现在一行上，从左到右彼此相邻，然后包含div的文本出现在包含div的右侧，集中在他们右边的空间。

相反，我不明白为什么最外面的包含div的文本不会出现在浏览器窗口的中心，然后在3以下包含div和它们的文本会出现。这就是我需要发生的事情。

这是代码。顺便说一句，我试图将.jpg图像嵌入到这个问题中，这样你就可以看到问题了 - 有谁知道如何在这里的问题中显示截图或.jpg？

<head>

<style>
#myRowStyles
{
  text-align:center;
  margin-bottom:100px;
  background-color:#b0e0e6;
  border: 1px solid red;
}       

#leftSide
{
  width:120px;
  float:left;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid red;
}

#centerPiece
{
  width:120px;
  float:left;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid red;
}

#rightSide
{
  width:120px;
  float:left;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid red;
}
</style>
</head>


<div id="myRowStyles"><b>THIS IS THE TOP OF THE ROW</b>
   <div id="leftSide">  LEFT SIDE -- Leftie
   </div>
   <div id="centerPiece"> Centerpiece, Folks.
   </div>
   <div id="rightSide">  All Righty -- RIGHT SIDE
   </div>
</div>
<div style="clear:both">
</div>
<div id="myRowStyles"><b>THIS IS ROW #2</b>
   <div id="leftSide">  LEFT SIDE -- Leftie
   </div>
   <div id="centerPiece"> Centerpiece, Folks.
   </div>
   <div id="rightSide">  All Righty -- RIGHT SIDE
   </div>
</div>

Answer 1

首先，您在页面上有多个相同的ID。那很糟。将它们更改为类。

第二个给myRowStyles一个宽度。

Answer 2

尝试这样的事情：http://jsfiddle.net/We74E/2/

Answer 3

我认为要使div表现得像表格，你必须在CSS中定义显示属性：

#container {
display: table;
}

#row  {
display: table-row;
}

#left, #right, #middle {
display: table-cell;
}

因此，您还需要在容器的开头添加额外的<div>。我没有测试过这个。

另外，我不认为你在使用DIV时可以使一行跨越3列，所以你必须这样做：

<head>

<style>

#container {
  width:90%;
  float:center;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid blue;
  text-align:centre;
  display: table;
}

#myRowStyles
{
  text-align:center;
  background-color:#b0e0e6;
  border: 1px solid red;
  display: table-row;

}       

#leftSide,#centerPiece,#rightSide
{
  width:120px;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid red;
  display: table-cell;

}
</style>
</head>

<div id="container">
<div id="myRowStyles">
   <div id="leftSide"> 
   </div>
   <div id="centerPiece"> Row 1
   </div>
   <div id="rightSide"> 
   </div>
</div>
<div id="myRowStyles">
   <div id="leftSide">  LEFT SIDE -- Leftie
   </div>
   <div id="centerPiece"> Centerpiece, Folks.
   </div>
   <div id="rightSide">  All Righty -- RIGHT SIDE
   </div>
</div>


<div id="myRowStyles">
   <div id="leftSide"> 
   </div>
   <div id="centerPiece"> Row 2
   </div>
   <div id="rightSide"> 
   </div>
</div>
<div id="myRowStyles">
   <div id="leftSide">  LEFT SIDE -- Leftie
   </div>
   <div id="centerPiece"> Centerpiece, Folks.
   </div>
   <div id="rightSide">  All Righty -- RIGHT SIDE
   </div>
</div>
</div>

文本不会以div为中心

3 个答案: