【发布时间】:2013-03-27 03:54:25
【问题描述】:
嘿,伙计们,所以我在我构建的 jquery 滑块上设计了一个内容主体.....我的问题是我需要一些图片来拥有float: left,以便它们彼此对齐,但父级有一个 @ 987654323@ 如果我添加 float:left 它会从父 div 中消失......HTML:
<div id="Content">
<div class="main_Body">
<div class="top-halfCont">
<div class="online_training">
<div class="training_image">
<img src="images/onlinetraining_home_03.png" width="75" height="75" />
</div><!-- .training_image -->
</div><!-- .online_training -->
<div class="background_check">
<div class="background_image">
<img src="images/background_check_home_03.png" width="75" height="75" />
</div><!-- .background_image -->
</div><!-- .background_check -->
<div class="uninsured_alert">
<div class="uninsured_alert_image">
<img src="images/unisuredalert_system_03.png" width="75" height="75" />
</div><!-- .uninsured_alert_image -->
</div><!-- .uninsured_alert -->
</div><!-- .top-halfCont -->
</div><!-- .main_Body -->
</div><!-- #Content -->
风格:
/* main content #Content */
#Content {
display:block;
max-width:1200px;
margin:0 auto;
background: white;
position: relative;
box-shadow: 5px 0px 13px #888888;
}
.main_Body {
display:block;
margin: -6em 0 0 0;
padding: 1em;
}
.online_training {
display:block;
width:200px;
}
.training_image {
width:75px;
height:75px;
margin:0 auto;
}
.background_check {
display:block;
width:200px;
}
.background_image {
width:75px;
height:75px;
margin:0 auto;
}
.uninsured_alert {
display:block;
width:200px;
}
.uninsured_alert_image {
width:75px;
height:75px;
margin:0 auto;
}
【问题讨论】:
-
我想我理解你的问题。我在这里做了一个 jsFiddle:jsfiddle.net/AgGuH 我所做的是删除了您对孩子
divs的所有width设置。然后,我在.top-halfCont上添加了 6em 边距,以抵消您在.main_Body上的 -6em -
图像如何对齐?水平还是垂直?
标签: html css coding-style