0

これが私が今までやってきたことです。

<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">

<br/><br/><br/>

<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>


<!----- left --->

<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">

<!------ right --->
<div>
</div>

問題は、左側の div にコンテンツがある場合、右側の div が下に行くことです。 ここに画像の説明を入力

4

3 に答える 3

0

コードが機能しない理由は、実際には非常に単純です。より良いアプローチだと思うので、最初に他の回答をいくつか作成しました。

position:absolute はアイテムを自動的に {0,0} に移動しません

自分で設定top:0pxする必要があります。

ああ..あなたのコードにもいくつかの間違いがありますが、私の他の回答の1つを使用してください。大丈夫です:)

于 2013-07-28T12:37:59.093 に答える
0

あはは！今あなたの編集を見ました！いくつかの css3 テーブル表示プロパティを使用すると非常に簡単ですが、古いブラウザーでは機能しません。

ただし、シンプルな CSS を使用して、サイドバー、ヘッダー、およびメイン コンテンツを含む標準のブログ テンプレートを作成できます。

<style>
    .body-wrapper {
        position:absolute;
        top:20px;
        left:50%;
        width:900px;
        margin-left:-450px; /* Half the width (negative) */
        background:red;
    }

    .header {
        position:relative;
        width:100%;
        height:100px;
        margin-bottom:10px;
        background:blue;
    }

    .main {
        float:left;
        width:70%;
        background:green;
    }

    .sidebar {
        float:right;
        width:30%;
        background:yellow;
    }
</style>

<div class="body-wrapper">
    <div class="header">
        Header!
    </div>
    <div class="main">
        Content!
    </div>
    <div class="sidebar">
        Sidebar!
    </div>
</div>

ここに証拠としてのjsFiddleがあります：http://jsfiddle.net/Kepk9/

それが役に立てば幸い！

于 2013-07-28T12:12:07.023 に答える
0

別の答え！

div を前後に配置したい場合は、次のように display:inline-block に設定できます。

<style>

    .inline {
        display:inline-block;
    }

</style>

<div class="inline">
    Labalodado
    <br/>multiline content
</div>
<div class="inline">
    Less content
</div>
<div class="inline">
    Another div
    <br/>with
    <br/>multiline content
</div>
于 2013-07-28T12:29:52.977 に答える