0

我知道在 float div 主题上打开了一百个主题，但我在那里找不到我的问题的答案，由于某种原因对我没有任何帮助。我有一个父 div，我想在其上放置两个静态 div，一个在右侧，一个在左侧，另一个 div 包含在它们之间浮动的主要信息，即它们之间的距离相等。但由于某种原因，它对我不起作用。我所做的每一次更改都会将右 div 向下踢或将主 div 粘贴到右\左。这是我的代码：

<html>
<head>
<link rel = "stylesheet" href = "tryout.css">
</head>
<body>
    <div id="super_wrap">
    <div class="ADDVERTISEMENT"><img src="add.jpg" /></div>
    <div id="wrap">
    some data
    </div>
    <div class="ADDVERTISEMENT2"><img src="add.jpg" /></div>
    </div>

</body>
</html>

和CSS：

.ADDVERTISEMENT{
margin-top:10px;
float:left;
margin-left:0 auto;
margin-right:0 auto;
}
.ADDVERTISEMENT2{
margin-top:10px;
float:right;
margin-left:0 auto;
margin-right:0 auto;
}
#wrap {
display: inline-block;
width:960px;
padding:10px;
background:red;
margin-left:0 auto;
margin-right:0 auto;
}
#super_wrap{
width:100%;
display: inline-block;
}
4

2 回答 2

1

放

text-align:center

在 上#super_wrap，并#wrap在 之后排名第三#ADDVERTISEMENT2。然后#wrap元素应该居中。

注意：如果里面没有足够的空间容纳所有 3 个，您仍然可以#wrap下降到下一行#super_wrap

这是一个工作小提琴：http: //jsfiddle.net/qN4Tp/

于 2013-07-26T15:51:20.573 回答
1

您有一些错误的 css 声明，这将导致您出现问题：

margin-left:0 auto;
margin-right:0 auto;

应用速记仅适用于margin:但不适用于margin-right:

要么做margin:0 auto;要么

margin-left:auto;
margin-right:auto;

如果您希望中间 div 显示在中间，您可以尝试像这样订购您的 html：

Ad1 Ad2 包装

见演示：http: //jsbin.com/oqujet/1/edit

于 2013-07-26T15:56:31.677 回答