1

私はこれに対する解決策を1日か2日ほど探していましたが、Webアプリケーションのコーディングに慣れていないため、問題を見つけることができないようです..

左に 2 つの div をフロートさせることに関係している予感があります。

質問は、メイン div がページ全体を囲んでいないのはなぜですか?

これは私のhtmlです..！

<body onLoad="initializePage()">
<script type="text/javascript">
        $('#Button1').click(function() {

        });
    </script>
<input type="button" id="Button1" value="korv" onClick="hidedivs()" />
<div id="main">
    <div id="searchholder">
        <div id="slider" class="searching"></div>
    </div>
    <div class="left">
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <table id="mytable" cellspacing="0">
                <thead>
                    <tr>
                        <th scope="col" abbr="Sidor/Artiklar" class="nobg">Sidor/Artiklar</th>
                        <th scope="col" abbr="Mozrank">MozRank</th>
                        <th scope="col" abbr="PR">PR</th>
                        <th scope="col" abbr="Dual 1.8GHz">Fri tillgång</th>
                        <th scope="col" colspan="2" abbr="Dual 2.5GHz">Välj själv</th>
                    </tr>
                </thead>
            </HeaderTemplate>
            <ItemTemplate>
                <tr data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'>
                    <th scope="row" abbr="Model" class="spec"><%# DataBinder.Eval(Container.DataItem, "namn_domain")%> </th>
                    <td class="alt" ><%# DataBinder.Eval(Container.DataItem, "moz_domain")%></td>
                    <td class="alt"><%# DataBinder.Eval(Container.DataItem, "pr_domain")%></td>
                    <td class="alt"><b></b>
                        <input type='<%# DataBinder.Eval(Container.DataItem, "type_domain")%>' name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value='<%# DataBinder.Eval(Container.DataItem, "faccess_domain")%>' onClick="calculatePrice();disableTB(this.name);" />
                        "Fri tillgång" </td>
                    <td class="alt"><input type="radio" name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value="0"  onclick="calculatePrice();enableTB(this.name, this.checked)" />
                        "Skriv ditt antal själv" </td>
                    <td class="alt" data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'><input type="text"  name='<%# DataBinder.Eval(Container.DataItem, "moz_domain")%>' id='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>'  Enabled="false" Width="40px" onKeyUp="calculatePrice()" style="background-color:#eeeeee" /></td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
    </div>
    <div id="pricingdetails" class="price">Priset för dina artiklar blir: </div>
</div>

そして、私の .css スタイルは

.price
{
 font-family:"Verdana";
 font-size:40px;
 color:Green;
 float: left;
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 border-top: 1px solid #C1DAD7;
 color: #797268;
 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 background: -moz-linear-gradient(center top , #FFFFFF 0%, #EDEDED 100%) repeat scroll 0 0 transparent;
 display: inline; 
 }

 div.searchholder
{
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px;
width: 480px;    
}

div.main
{
}

div.left
{
float: left;  
}
.searching
{
}
4

4 に答える 4

5

ここでの問題は、あなたの内部の要素#main divがフロートされているため、あなたのとは異なるフローで考慮され、divそれらに合わせてサイズが変更されないことです。これを修正する方法は次のとおりです。

  • スタイリングoverflow: hidden;に#mainプラス。
  • #mainを追加してフロートしますfloat: left;。
  • #main divこれを:に追加します<div style = "clear: both;"></div>(これは最も好ましくない方法です)。
于 2012-09-05T19:17:38.907 に答える
2

#mainの子要素のフロートをクリアする必要があります

他の人が提案したこと（フロートをクリアする目的で要素を追加する;悪い習慣）を行う代わりに、疑似要素を使用してください。次の CSS を使用するだけで出来上がりです!

#main::after {
 clear:both;
 content: "";
 display: table;
}

これがフィドルです。このピンク色の背景は、上記の#mainの結果を示すためにあります。

于 2012-09-05T19:59:52.353 に答える
1

終了タグの前に clear を追加します。

<div style="clear:both"></div>
于 2012-09-05T19:20:24.723 に答える
1

メインの div ( #main) はフローティングされていませんが、その中に要素がフローティングされています。

フロートをクリアするには、CSS を追加します。

#main {
    overflow: hidden;
}
于 2012-09-05T19:17:59.503 に答える