0

2 つの div 要素を含む div 要素があり、内側の div がフローティングされています。しかし、自動高さのメイン div が必要です。未修理。また、背景が適切に表示される必要があります。高さを250px背景に設定すると、250px の領域しか表示されません。しかし、高さをauto背景に設定すると表示されません。背景を自動高さで表示するにはどうすればよいですか?

私のHTMLコード:-

<div class="ejz_wc" id="ejz_wc">
    <div class="ejz_wc_main" id="ejz_wc_main">
        <div class="ejz_wcm_txt">
            <h2 class="ejz_wc_1_h2">Welcome</h2>
            <p class="ejz_wc_msg">
            If you are new to us then Register a free account today .<br />
            We are here to give you entertainment
            </p>
            <div class="wclinks">
            <a href="<? echo $url; ?>/info/about.php">Learn moare about us</a><br />
            <a href="<? echo $url; ?>/info/payment.php">Learn more about Payment</a><br /><br />
            <a href="ez-register.php#free">Register</a> for a free Account<br />
            <a href="ez-register.php#performer">Register</a> for a Premium Account<br />
            </div>
        </div>
        <div class="ejz_wc_box">
            <div class="ejz_wcbox">
                <h3>Sign In</h3>
                <p>Sign in to us

                <center><a class="lnksnrg" href="ez-login.php"><div class="signin_ejz">Login</div></a></center>
                <h3>Not registered yet?</h3>
                Register now and get access to all items.</p>
                <br />
                <center><a class="lnksnrg" href="ez-login.php"><div class="register_ejz">Register</div></a></center>
            </div>
        </div>
    </div>
</div>

そして私のCSSコードは次のとおりです:-

.ejz_wc
{
width:900px;
margin:auto;
height:250px;
}
.ejz_wc_main
{
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif;
height:100%;
border-radius:10px;
-moz-border-radius:10px;
width:100%;
background:#f4f4f4;
}
.ejz_wcm_txt a
{
text-decoration:none;
}
.ejz_wcm_txt a:hover
{
text-decoration:underline;
}
.ejz_wcm_txt
{
float:left;height:auto;
width:450px;
padding:10px 20px;
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif;
}
.ejz_wc_box
{
float:right;height:auto;
width:320px;
padding:10px;
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif;
}
.ejz_wc_1_h2
{
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif;
font-size:x-large;
color:#38939b;height:auto;
}
h1, h2, h3, h4, h5, h6
{
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif;
}
.signin_ejz , .register_ejz
{
background:#019be1;
background: -moz-linear-gradient(019be1, #1a75d6); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1a75d6),color-stop(1, #019be1));    
background: -webkit-linear-gradient(#019be1, #1a75d6);  
background: -o-linear-gradient(#019be1, #1a75d6);
background: -ms-linear-gradient(#019be1, #1a75d6);
background: linear-gradient(#019be1, #1a75d6);
padding:5px;
border-radius:10px;
-moz-border-radius:10px;
color:white;
text-decoration:none;
width:100px;
margin:auto;
border:2px solid #019be1;
}

.lnksnrg
{
text-decoration:none;
color:white;
}
.lnksnrg:hover
{
text-decoration:none;
}
.signin_ejz:hover , .register_ejz:hover
{
background:#019be1;
border:2px solid #019be1;
background: -moz-linear-gradient(1a75d6, #019be1); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #019be1),color-stop(1, #1a75d6));    
background: -webkit-linear-gradient(#1a75d6, #019be1);  
background: -o-linear-gradient(#1a75d6, #019be1);
background: -ms-linear-gradient(#1a75d6, #019be1);
background: linear-gradient(#1a75d6, #019be1Fwc);
}
4

3 に答える 3

1

最初の 2 つのクラスにこの Css コードを使用...

.ejz_wc
{
    幅:900px;
    マージン:自動;
    高さ:自動;
}

.ejz_wc_main
{
    font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif;
    高さ:100%;
    ボーダー半径:10px;
    -moz-border-radius:10px;
    幅:100%;
    背景:#f4f4f4;
    フロート:左;
}

ハハハ

于 2013-06-15T05:23:02.700 に答える