Question

请问如何使用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" />j.banti09@gmail.com
        <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/

Answer 1

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/

Answer 2

这是一个JS小提琴答案。我使用基于百分比的宽度而不是像素宽度：http://jsfiddle.net/4nHr8/

CSS如下：

.left {
    float:left;
    width: 40%;
    padding: 0 2.5%;
    display:inline-block;
    border-left: 2px solid #333;
}
.right {
    float:left;
    width: 40%;
    padding: 0 2.5%;
    display: inline-block;
}

Answer 3

你只需要浮动两个有问题的元素。

您可以在此处查看： http://jsfiddle.net/rXT95/2/

HTML：

<div class="container">
    <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" />j.banti09@gmail.com
            <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>
</div>

CSS：

.container{
    width:950px;
    margin:0;
    margin-left:auto;
    margin-right:auto;
    border-style:solid;
    background-color:orange;
    overflow: hidden; /* added */
}

.left {
    width:450px;
    margin-left:10px;
    float: left; /* added */
}

.right{
    width:390px;
   margin-left:10px;
    float: left; /* added */
}

Answer 4

使用CSS3 box-sizing: border-box模型（IE8 +）：http://jsfiddle.net/ashjt/3br3a/2/

使用普通的CSS：http://jsfiddle.net/ashjt/3br3a/4/

Answer 5

检查我在外部div上添加的html以及div的添加样式

<br>
<div style='width:100%'>
<div class="left colborder" style='width:50%;float:left'>
<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" />
    j.banti09@gmail.com
    <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)-->
<div style='width:50%;float:right'><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>
     </div>
</div>`

使用css3水平对齐div标签

5 个答案: