![](/img/trans.png)
[英]How to keep divs in a container within another container to display inline and floated right?
[英]how to keep floated item centered within container
好的,我已经开始了页面的预备版本,但是我遇到了两个浮于头标中的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; 宽度950像素,页边距0自动,字体系列单字型粗细800像素大小20像素,文本对齐中心。 .gridContainer.clearfix #headGraphics#headRectangle1; 宽度350px,高度75px,显示行内块,空白rt和lft自动,相对位置,框阴影(无法正常工作).gridContainer.clearfix #headGraphics#headRectangle2宽度350px,高度75px,显示行内块,相对位置,顶部-50px,rt 0px,bot 0px,左100px(这是使对象向上移动并偏离矩形),向左浮动,都清除,文本高度居中。
我建议从两者中都删除float属性,然后将两个项目都设置为inline-block,在这两种情况下都需要指定宽度和高度,然后将文本对齐中心应用于父对象,这将使子对象成为以家长可用区域为中心。
Display:inline-block将使这两个元素不仅具有类似于block元素的功能,而且具有block和inline的功能,因此您将能够同时使用这两个属性。
如果您需要一个示例,我可以为您提供一个示例,请告诉我!
编辑...
这是一个有效的例子
我的JSFiddle
我的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.