1

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

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

几乎没有/screencast/html-training/css/positioning/

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 将一个 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%，右侧宽度设置为 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 回答