Question

我对css和html很新，我在另一个div中浮动div时遇到问题，我在网上做了很多研究，但还没有找到解决方案。

这些是我读过的网站，没有用的地方：

barelyfitz / screencast / html-training / css / positioning /

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

mirificampress /show.php?id=106

How to get Floating DIVs inside fixed-width DIV to continue horizontally?

我的代码可以在jsFiddle here

找到

Answer 1

我希望这会有所帮助。 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>

Answer 2

喜欢这个吗？

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

Answer 3

因为你是初学者。我会直截了当地说。下面是提取代码。我使用了内部样式表。您使用外部样式表的示例。使用float属性可以将其设置为左右。这里使用的是float：左边是一个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％，右边宽度设置为20％。（总数应为100％）。相应调整。背景颜色用于设置div的背景颜色。

.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}

将div左右定位在另一个div中

3 个答案: