请我如何使用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/

10-09 20:53