0

下に 3 つの div が必要なテキストのチャンクがありますが、CSS を理解できないようです。

以前は使用floatしていましたが、Chrome と FF では正常に動作しましたが、IE8 では動作しなかったため、フロートを削除inline-blockし、親 div で使用していますが、正しく動作しているようです。

ここに私がこれまでに持っているもののフィドルがあります:

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

フィドル

これは私が欲しいものです:

ここに画像の説明を入力

4

2 に答える 2

-1

これがあなたが探している 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>
于 2013-10-28T13:15:08.240 に答える