CSS 全宽减去边距左 div，20px 同一行右 div答案

【问题标题】：CSS full width minus margin left div, 20px same line right divCSS 全宽减去边距左 div，20px 同一行右 div
【发布时间】：2013-11-03 22:00:12
【问题描述】：

我正在尝试使下面的第一个 div 子级用完可用空间的 100% 减去 20px，然后使用第二个 div 子级来使用 20px 并与第一个孩子div。

<div style="width: 10%;">

<div style="float: left; margin-right: 20px;">Left side, should use up all space except margin!</div>

<div style="float: left; margin-left: -20px; width: 20px;">Should only use 20px no matter what.</div>

</div>

这应该可以通过 CSS 级别 1 完成（这意味着没有 position lame-outs），尽管我知道我遗漏了一些东西。此外，anchors 在两个div 元素中必须使用100% 的可用宽度，所以这里有一个技巧可以让float 以某种方式表现...

【问题讨论】：

是否绝对有必要让 div 浮动？
有几种方法可以并且应该做到这一点。然而，最重要的问题是，你的 HTML 结构可以改变吗？如果可以，它应该。
是的，HTML 可以更改更改。没有必要在其中一个或任何一个上包含float，我只是将它用于测试。

标签： css css-float margin

【解决方案1】：

解决方案 #1

利用overflow: hidden（或溢出：自动）来填充剩余的水平空间。

（注意：为此，您需要先将元素放在标记的右侧）

FIDDLE

<div>
    <div class="div2">DIV 2</div>
    <div class="div1">DIV 1</div>   
</div>

CSS

.div1 {
    background:yellow;
    overflow: hidden;
}
.div2 {
    background:brown;
    float:right;
    width: 50px;
}

解决方案 #2

您可以通过box-sizing: border-box 做到这一点

FIDDLE

<div>
    <div class="div1">DIV 1</div>
    <div class="div2">DIV 2</div>
</div>

CSS

.div1 {
    background:yellow;
    float:left;
    padding-right: 50px;
    margin-right: -50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}
.div2 {
    background:brown;
    float:left;
    width: 50px;
}

解决方案 #3

使用 css 表：

FIDDLE

<div class="container">
    <div class="div1">DIV 1</div>
    <div class="div2">DIV 2</div>
</div>

.container
{
    display:table;
}
.div1 {
    background:yellow;
    display: table-cell;
    width: 100%;
}
.div2 {
    background:brown;
    width: 50px;
    display: table-cell;
    word-break: break-word;
    min-width: 50px;
}

解决方案 #4（需要 CSS3）

使用calc

FIDDLE

在第一个子集width: calc(100% - 50px)

在第二个 div 集上width: 50px;

.div1 {
    background:yellow;
    width: calc(100% - 50px);
    float: left;

}
.div2 {
    background:brown;
    width: 50px;
    float: left;
}

【讨论】：

我不能使用 CSS level 2 位置，所以这意味着没有 CSS level 3。这是一个通用布局，不幸的是 CSS3 calc 目前的兼容性很差。感谢您尝试任何方式。
@John - 我刚刚添加了两种额外的方法
谢谢...我现在无法动脑筋，要崩溃了，但我会在醒来后尝试一下，看看其他人的。谢谢大家。
哇，我刚刚了解了 calc... 我一直希望这个东西存在，现在它实现了！也是解决我的问题的最简单方法
@ses 。感谢您发现这一点。问题在于宽度超过 50 像素的单词 - 其中右列会扩展到这些长单词的宽度。我更新了添加word-break: break-word; min-width: 50px; 的帖子，解决了这个问题

【解决方案2】：

这是使用display:table 的另一种方法。

<html>
<style>
body { padding:0; margin:0; display:table; width:100%; }
#content { display:table-row; }
#b1, #b2 { display:table-cell; }
#b1 { background-color:#eee; padding:2em; }
#b2 { width:20px; background-color:#bbb; }
</style>
</head>
<body>
<div id="content">
<div id="b1">
<h1>Main content here</h1>
<p>Side bar on right is 20 px wide.</p>
</div>
<div id="b2">
</div>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

你能稍微改变一下 HTML 结构吗？

<div style="width: 10%;">
    <div style="display: block; width: 100%;">
        <div style="width: 20px; float: right;"></div>
    </div>
</div>

【讨论】：