Question

我有一个容器，其中包含2个浮动左边的div。右边的div总是断开到下一行，因为我在div中的文本太长了。我希望文本显示在div的右侧。我想避免明确设置段落的宽度或它所在的div。

.container {
    height: 300px; 
    width: 260px; 
    background: #CCC;
}

.inner-container {
    width:100px;
    height:200px; 
    background:red;
}

.left {
    float: left;
}

<div class="container">
<div class="left">
    <div class="inner-container">
    </div>
</div>
<div class="left">
    <p>I want this to sit to the right of the red box without explicitly setting the width.
    </p>
</div>

的jsfiddle： https://jsfiddle.net/go3ugkr0/

Answer 1

您可以使用Flexible Boxes模型来实现这一目标，这是一种新的布局模式，通过替换float:属性来改进标准框模型。

出于浏览器兼容性原因，使用 灵活方框 ，请参阅此内容 - Compatibility Chart

我在下面的示例代码中使用了HTML5语义标记（部分，图形，文章）来为您的页面内容添加清晰度和“权威”含义，从而增加SEO。

Here is the JSFiddle Demo

屏幕截图：

// HTML（index.html）

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <section>
        <figure>
            <div>Inner</div>
        </figure>
        <article>
            <p>I want this to sit to the right of the red box without explicitly setting the width.</p>
        </article>
    </section>
</body>
</html>

// CSS（index.css）

body{
    margin: 0 !important;
}
section{
    display: -webkit-flex;
    display: flex;
    width: 260px;
    height: 300px;
    background: #5c5c5c;
}
figure{
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 !important;
    background: #ccc;
}
figure>div{
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1;
    flex: 1;    
    background: #ECF0F1;
    color: #5c5c5c;
    margin: 5px;
}
article{
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1;
    flex: 1;
}
p{
    margin: 5px;
    color: #ECF0F1;
}

Answer 2

如果你想要一些东西漂浮在文本上并且文本围绕它流动（这实际上就是float属性的用途），那么你需要将浮动元素放在文本中并浮动它，如下所示：

HTML

<div class="container">
    <div class="inner-container">
    </div>
    <p>I want this to sit to the right of the red box without explicitly setting the width.</p>
</div>

CSS

.inner-container {
    float: left;
}

See an example here

Answer 3

这是您要求的“非flexbox”解决方案，来自我使用“flexbox”的其他答案。

Here is the JSFiddle Demo

屏幕截图：

// HTML（index.html）

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <section>
        <figure>
            <div>Inner</div>
        </figure>
        <article>
            <p>I want this to sit to the right of the red box without explicitly setting the width.</p>
        </article>
    </section>
</body>
</html>

// CSS（index.css）

body{
    margin: 0 !important;
}
section{
    width: 260px;
    height: 300px;
    background: #5c5c5c;
}
figure{
    width:100px;
    height:200px; 
    margin: 0 !important;
    background: #ccc;
    float: left;
}
figure>div{
    background: #ECF0F1;
    color: #5c5c5c;
    margin: 5px;
}
p{
    margin: 0;
    color: #ECF0F1;
}

Float元素没有明确设置宽度

3 个答案: