我如何在我的文本下获得我的div？

Question

我有一大块文本，下面需要有3个div，但我似乎无法弄清楚CSS。

之前我使用float并且它在Chrome和FF中工作正常但是它在IE8中无效，所以我现在删除了浮点数并且我在父div上使用inline-block但是我似乎能做对了。

这是我到目前为止的一个小提琴：

<div class="allinfo">



<div class="menu">

<div class="menutop">
WATCHGUARD SHOP MENU
</div>


<span>
<ul class="menuoptions">

<li><span class="redtext">WatchGuard Home</span></li>

<li>XTM Series Firewalls</li>

<li>XCS Series Firewalls</li>

<li>SSL VPN Encryption</li>

<li>Security In Education</li>

<li>Wireless Access Points</li>

<li>FREE Quotation</li>
</ul>

<div class="tradein">
TRADE IN
</div>
<div class="tradeininfo">
<strong>Trade Up</strong><br>
Trade in an earlier generation WatchGuard appliance or any approved non-WatchGuard appliance-based security solution, and trade up to eligible new WatchGuard solutions at 25% off the standard purchase price. </div>

</div>


<div class="whitepapers">
WHITEPAPERS
</div>

<div class="whitepapersinfo">

<ul>

<li>Take Back Control</li>

<li>Data Loss Prevention</li>

<li>Securing the Virtual World</li>

</ul>

</div>
</div>

<div class="maintext">
<h5>Welcome To The WatchGuard Homepage</h5><br>

<p>WatchGuard builds affordable, all-in-one network and content security solutions to provide defense in depth for corporate content, networks and the businesses they power.</p>

<p>WatchGuard's award-winning extensible threat management (XTM) network security solutions combine firewall, VPN and security services to protect networks from spam, viruses, malware and intrusions.</p>

<p>The new Extensible Content Security (XCS) appliances offer content security across e-mail and web combined with data loss prevention for complete content protection.</p>

<p>WatchGuard extensible solutions scale to offer right-sized security for small businesses up to enterprises with 10,000+ employees.</p>

<p>Since our founding in 1996, more than 600,000 WatchGuard signature red security appliances have been deployed worldwide. Today more than 15,000 dedicated partners back our products in 120 countries.</p>
</div>

<div class="product">
<span>WatchGuard SSL/VPN</span><br><br><br>
<img src="images/watchguard-tb-ssl.jpg" width="199"><br><br>
<p>
Remote connectivity. Secure remote access that just works.</p>

</div>

<div class="product">
<span>WatchGuard XCS</span><br><br><br>
<img src="images/watchguard-tb-xcs.jpg" width="117" height="72"><br><br>
<p>
Content security. Defense in-depth email security and web security.</p>

</div>

<div class="product">
<span>WatchGuard XTM</span><br><br><br>
<img src="images/watchguard-tb-xtm.jpg" width="122" height="72"><br><br>
<p>
Multi-function firewalls. Incredible speed. Unbelievable value.</p>
</div>


</div>

Fiddle

这就是我想要的：

Answer 1

我添加了浮点数而不是内联块，请告诉ie8它是否好，我不知道：

.allinfo {
   float: left;
}

.maintext {
    float: right;
    width:700px;
    height:500px;
    position:relative;
    top:40px;
    font-size:smaller;
    font-weight:normal;
    vertical-align:top;
}

.product {
    width:205px;
    height:205px;
    border-style:solid;
    border-width:1px;
    border-color:#CCC;
    margin:4px;
    right:25px;
    padding:10px;
    text-align:center;
    float: right;
}

Jsfiddle

Answer 2

希望这是您正在寻找的HTML代码。它与您定义的模式相同。根据您的要求更改代码。

<style type="text/css">
.smallBottomDivs
{
   width:100px; height:100px; display:inline-block; background-color:#0CC;
}
.MainDivs
{
   height:200px; display:inline-block; background-color:#F00;
}
</style>
<div style="display:block;">
    <div class="MainDivs" style="width:100px;float:left;"></div>
    <div class="MainDivs" style="width:350px;">
           <div style="width:300px; display:block; height:100px;"></div>
           <div style="width:350px; display:block;">
               <div class="smallBottomDivs"></div>
               <div class="smallBottomDivs"></div>
               <div class="smallBottomDivs"></div>
           </div>
        </div>
    </div>