面临左右浮动的问题

Question

我需要在一个大的div中有两个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%的画布意味着(身体(

.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;
}

<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>