Question

好的，我已经启动了我的页面的预备版本，但是我遇到了两个浮动div的问题，这些div包含在标头标记中。基本上，我希望两个矩形在包含div标签的中心。其中一个矩形与另一个重叠。我不得不向我们定位，以便能够在容器内扩展它们，否则第二个会跳到第一个以下。

这是我迄今为止所拥有的。

     <div id="div1" class="fluid"> 
        <header id="headGraphics">
            <div id="headRectangle1">This will be an image.</div>
            <div id="headRectangle2">"This will be text adjusted using opacity."
     </div>

这是页面的css - 我们在解决这个问题之后有一个后续问题。

.gridContainer.clearfix #headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;

 }
 .gridContainer.clearfix #headGraphics #headRectangle1 {
     float: left;
     width: 350px;
     height: 75px;
     position: relative;
     border: medium solid #000000;
     -webkit-box-shadow: 3px 3px 3px 1px #FF7878;
     box-shadow: 3px 3px 3px 1px #FF7878;
     margin-left: auto;
     margin-right: auto;
     display: inline-block;
 }
 .gridContainer.clearfix #headGraphics #headRectangle2 {
     background-color: #FFAAAA;
     float: left;
     /*margin-right: 50px;*/
     width: 350px;
     height: 75px;
     position: relative;
     top: -50px;
     right: 0px;
     text-align: center;
     clear: both;
     left: 100px;
     margin-left: auto;
     margin-right: auto;
     display: block;
 }

     .gridContainer.clearfix #headGraphics:after {
     content: " ";
     display: table;
     clear: both;
     }

我无法移除位置标记，因为它们为我提供了我正在尝试完成的布局。

如果您需要更多信息，请告诉我们。先感谢您。是的，我已经搜索了这个页面和其他人找到了解决方案，但似乎没有一个适用于我的特定情况。

让我澄清一些事情......在我继续前进之前，我的大多数（98％）选择器都在锅炉板模板中。话虽如此，这里是每个选择器的计算效果：

.gridContainer.clearfix #headGraphics; 宽度950px，边距0自动，字体系列单型重量800px尺寸20px，文本对齐中心。 .gridContainer.clearfix #headGraphics＃headRectangle1; 宽度350px，高度75px，显示内联块，边距rt＆amp; lft auto，position relative，box-shadow（不能正常工作） .gridContainer.clearfix #headGraphics #headRectangle2 宽度350px，高度75px，显示内联块，位置相对，顶部-50px，rt 0px，机器人0px，左侧100px（这是为了使对象向上并从矩形偏移），向左浮动，清除两者，文本 - 中心。

Answer 1

我建议从两者中删除float属性，然后只设置两个项目显示为内联块，您需要在两种情况下指定宽度和高度，然后将text-align center应用于父级，这将允许孩子要以父母可用区为中心。

显示：内联块将使两个元素的行为不仅像块元素一样，它既可以是块，也可以是内联，因此您可以同时使用两者的属性。 / p>

如果您需要一个例子，我可以为您提供一个，请告诉我！

编辑...

这是一个工作示例

我的JSFiddle

http://jsfiddle.net/dq185dw9/

我的CSS

#headGraphics {
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    font-family: "monotype corsiva";
    font-size: 20px;
    font-weight: 800;
    width: 950px;
    text-align: center;
    outline: red dashed 1px;
    padding: 35px; /* remove or change if needed */
 }
#headGraphics [id*="headRectangle"] {
     width: 350px;
     height: 75px;
     position: relative;
     border: medium solid #000000;
     -webkit-box-shadow: 3px 3px 3px 1px #FF7878;
     box-shadow: 3px 3px 3px 1px #FF7878;
     display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px 25px;
    line-height: 75px; /* remove or change if you want to have more than one line of text */
 }

我的HTML

<header id="headGraphics">
    <div id="headRectangle1">This will be an image.</div>
    <div id="headRectangle2">"This will be text adjusted using opacity.</div>
</header>

如何保持浮动项目在容器中居中

如果您需要更多信息，请告诉我们。先感谢您。是的，我已经搜索了这个页面和其他人找到了解决方案，但似乎没有一个适用于我的特定情况。

1 个答案: