1

私はcssとhtmlにまったく慣れておらず、別のdiv内にdivをフローティングするのに問題があります。オンラインでかなりの調査を行いましたが、解決策を思い付くことができませんでした。

これらは私が読んだサイトであり、役に立たない場所です。

かろうじてフィッツ/screencast/ html-training / css / position /

stackoverflow / questions / 580195 / css-layout-2-column-fixed-fluid

mirificampress /show.php?id=106

固定幅DIV内のフローティングDIVを水平方向に継続させるにはどうすればよいですか？

私のコードはjsFiddleのここにあります

4

3 に答える 3

2

これがお役に立てば幸いです。CSS：

#left, #right {
 width: 100px; //change this to whatever required
 float: left;
}

HTML：

<div id="wrapper">
    <div id="left">
       <p class="t0">lorum itsum left</p>
    <div>
    <div id="right">
       <p class="t0">lorum itsum right</p>
    <div>
<div>
于 2012-04-27T17:46:37.323 に答える
0

このような？

http://jsfiddle.net/Ev474/

<div id="wrapper">
    <div id="inner">
        <div id="left">
            Left Content
        </div>
        <div id="right">
            Right Content
        </div>
    </div>
</div>

div {
    height: 50px;
}
#wrapper {
    width: 200px;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #ccc;
}
#inner {
    width: 400px;
}
#left {
    width: 150px;
    float: left;
    background-color: #f00;
}
#right {
    width: 150px;
    float: left;
    background-color: #0f0;
}​
于 2012-04-27T17:43:16.750 に答える
0

あなたは初心者なので。簡単に説明します。以下は、コードの抽出です。内部スタイルシートを使用しました。外部スタイルシートを使用している例。float属性を使用して、左右に設定できます。ここでは、float：leftを使用して1つのdivを左に降ろし、float：rightを使用して他のdivを右に降ろします。開いた各タグは閉じたタグである必要があります。

    <head>
    </head> 
    <!--Internal style sheet-->
    <style>
    .left{
    float:left;
    }
    .right{
    float:right;
    }
    </style>

    <body>
    <div id="wrapper" >
        <div class="left">
            <p class="t0">lorum itsum left</p>
        </div>
        <div class="right">
            <p class="t0">lorum itsum right</p>
        </div>
    </div>
    </body>
    </html>

追記：左右のdivのサイズを調整する場合は、スタイルシートの幅を使用してください。以下の更新されたスタイルシートを参照してください。左のdiv幅を画面幅の80％に、右のdiv幅を20％にしました（合計は100％になるはずです）。それに応じて調整します。divの背景色を設定するために使用される背景色。

.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}
于 2017-05-05T13:01:29.167 に答える