请我如何使用css3水平对齐div标签的两个内容。我的封闭主体的总宽度为950像素,并且我将第一个div标签的宽度指定为470像素。我的假设是,第二个div标签将占据480像素的剩余空间,但它并未定位
这是HTML代码
<div class="left colborder">
<p>To know what's cooking you can check our <a href="#"> events </a> for more
<br />For more information Contact Us</p>
<div class="left-ContactInformation">
<img src="Picture%20Related/Email%20Logo.png" alt="Email Address Icon" title="Email Address Icon" id="EmailAddressIcon" />[email protected]
<br />
<img src="Picture%20Related/Telephone%20Logo.png" alt="Phone Number Icon" title="Phone Number Icon" id="PhoneNumberIcon" />08138549501</div>
</div>
<!--There Should be a separator (vertical)-->
<form action="/" method="post">
<div class="right">Tell us what you think or feel about this site
<div id="right-UserComment">
<input type="text" name="Name" placeholder="Name" required />
<input type="email" name="Email" placeholder="Email Address" required />
<br />
<textarea cols="40" rows="3" wrap="hard" required placeholder="What's up?" name="comments"></textarea>
</div>
<button type="submit" value="submit">Send</button>
</div>
</form>
这是CSS,它包括容器,左右div标签css。
container{
width:950px;
margin:0;
margin-left:auto;
margin-right:auto;
border-style:solid;
background-color:orange;
}
.left {
width:450px;
margin-left:10px;
}
.right{
width:390px;
margin-left:10px;
}
http://jsfiddle.net/isherwood/rXT95/
最佳答案
container{
width:950px; margin:0;
margin-left:auto; margin-right:auto; border-style:solid;
background-color:orange;
}
.left {
width:450px;
margin-left:10px;
float:left;
}
.right{
margin-left:0 auto;
}
更新。
http://jsfiddle.net/3VF9Q/
关于html - 使用CSS3水平对齐div标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20639389/