Question

我需要一个大的2个div：第一个将向左浮动，第二个将向右浮动我给了第一个div宽度为75％和第二个25％，看起来第二个div没有找到它正确的位置所以它一直在右侧的左边div下面

这是我的代码：

<div class="centerDiv2">
        <span class="title2">LATEST BULLETIN</span>
        <hr>
        <div class="divLeft">
            <img src="images/5891.jpg"/>
            <span class="title">JUL 19</span>
            <p class ="prog">"I Mathew</p>
        </div>

        <div class="divLeft">
            <img src="images/42St.jpg"/>
            <span class="title">JUL 19</span>
            <p class ="prog">"I Mathew</p>
        </div>

        <div class="divRight">
            <span class="title">RECENTLY</span>
            <hr>
        </div>
    </div>

CSS：

.divLeft {
    width:70%;
    margin: 30 0;
}

.title2 {
    font-size: 20px;
    font-weight:bolder;
    font-family: courier;
    float: left;
    width: 100%;
}

.centerDiv2 {
    width: 1000px;
    margin: 30 auto;
}

.divRight {
    width:25%;
    height:400px;
    background-color: lightgray;
    float:right;
    margin: 30 0;
}

Answer 1

<强> HTML：

    <div class="centerDiv2">
    <span class="title2">LATEST BULLETIN</span>
    <hr>
<div class="leftDiv">
    <div class="divLeft">
        <img src="images/5891.jpg"/>
        <span class="title">JUL 19</span>
        <p class ="prog">"I Mathew</p>
    </div>

    <div class="divLeft">
        <img src="images/42St.jpg"/>
        <span class="title">JUL 19</span>
        <p class ="prog">"I Mathew</p>
    </div>
</div>

    <div class="divRight">
        <span class="title">RECENTLY</span>
        <hr>
    </div>
</div>

<强> CSS：

.title2 {
   font-size: 20px;
   font-weight:bolder;
   font-family: courier;
   width: 100%;
}
.leftDiv{
   width: 70%; display: inline-block;
}
.divRight { 
   display: inline-block; vertical-align: top; height: 400px; width: 25%;background-color: lightgray;
 }

Answer 2

嗨，伙计问题是宽度为75％和25％使用保证金，因为你已经给出了保证金，尽管你已经有100％的帆布手段（正文）

＆＃13;

.wrapper{
    margin: 30px 0;
}
.divLeft {
    width:70%;    
    background-color:red;
}

.title2 {
    font-size: 20px;
    font-weight:bolder;
    font-family: courier;
    float: left;
    width: 100%;
}

.centerDiv2 {
    width: 1000px;
    margin: 30px auto;
}

.divRight {
    width:25%;
    height:400px;
    background-color: lightgray;
    float:right;
    margin: 30px 0;
      background-color:black;
}

＆＃13;

<div class="centerDiv2">
        <span class="title2">LATEST BULLETIN</span>
        <hr>
        <div class="wrapper">
        <div class="divLeft">
            <img src="images/5891.jpg"/>
            <span class="title">JUL 19</span>
            <p class ="prog">"I Mathew</p>
        </div>

        <div class="divLeft">
            <img src="images/42St.jpg"/>
            <span class="title">JUL 19</span>
            <p class ="prog">"I Mathew</p>
        </div>
            </div>
        <div class="divRight">
            <span class="title">RECENTLY</span>
            <hr>
        </div>
    </div>

＆＃13;

面临左右浮动问题

2 个答案: