使用浮动并排对齐div元素[重复]答案

【问题标题】：Align div elements side by side using floats [duplicate]使用浮动并排对齐div元素[重复]
【发布时间】：2014-01-28 14:39:30
【问题描述】：

我主要是一名后端开发人员，但我正在努力使布局正确。基本上，我正在创建一个列表视图页面，该页面将在左侧包含一个div 标记，该标记具有一堆过滤器（下拉列表、复选框等）。在屏幕的右侧，我将有一个包含网格的div 标签。这似乎有效，但当我在头顶上或屏幕未最大化时看起来很糟糕。我这样做对吗？基本上这就是我所追求的：

我为此做的 CSS 就是这么简单：

.filterContainer {
    width:20%; 
    float:left;
}


.gridContainer {
    width:79%; 
    float:right;
}

基本上.filterContainer 是我的左边div (dLeft) 而.gridContainer 是我的右边div (dRight)。这对我想要实现的目标有效吗？结果如下所示：

http://i.imgur.com/WFasMF1.png

但是，如果我调整窗口大小，我最终会得到以下结果：

http://i.imgur.com/4u9HRlK.png

我想这是正常的，因为我正在调整大小，但我的 css 有效吗？

【问题讨论】：

我会修复左侧面板的大小，因为过滤器中使用的大多数文本框、组合框等在恒定大小上看起来更好......而且我认为这不是一个好主意，允许网格调整大小直到 0 宽度...绝对最好设置一些最小宽度
你的 CSS 没问题，但你可以修改它，这样当你调整大小时，页面仍然是响应式的。
来吧，20K 代表，您认为我们不需要查看您的代码吗？
@ArsenMkrt - 将左侧面板尺寸固定为什么/在哪里？你是说百分比吗？
没有。这不正常。 20% 甚至 80% 而不是 79% 应该适用于所有浏览器尺寸。你应该做错了什么，一个利润？填充？请出示您的完整代码！

标签： html css css-float grid-layout

【解决方案1】：

首先，当您处理基于网格的布局时，请始终确保您使用

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

   /* Resets */
   margin: 0;
   padding: 0;
}

注意：* 只不过是一个通用选择器，它将应用为每个元素定义属性。为了针对具体元素，使用更具体的选择器，如 div.class_name 等

现在，您为什么需要它？

如果你在下图中看到..

CSS在盒子外面而不是里面添加margin、padding和border，这是默认的内容框行为，所以当你使用我分享的sn-p时，它会改变盒子模型行为并使元素计数元素内的border 和padding。

谈到您的问题，您提供的 CSS 是完美的，但是 position、float 或 margin 甚至 未清除的浮动元素 任何东西都可能导致您面临的问题，因此，如果可以，请考虑更改您的 CSS 样式表，如果您使用 box-sizing: border-box; 将是值得的

您是如何做到这一点的？

好吧，很明显，我不会为您提供全部内容，而只是大致了解如何实现这一点，因为我看到您正在使用 ~~width: 79%;~~ 现在这是非常强有力的原因为什么我建议你改变盒子模型。

现在，我有两个元素浮动到左边，改变了盒子模型，所以我不必为任何元素使用-1% width。当您需要间距时，在网格内嵌套更多块，然后使用 padding 而不是 ~~margin~~，尤其是在浮动父元素上。

Demo

<div class="wrap">
    <div class="left_wrap"></div>
    <div class="right_wrap"></div>
</div>

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    /* Resets */
    margin: 0;
    padding: 0;
}

.wrap:after {
    clear: both;
    display: table;
    content: "";
}

.wrap > div {
    min-height: 300px;
}

.wrap .left_wrap {
    width: 30%;
    float: left;
    border: 3px solid #f00;
}

.wrap .right_wrap {
    border: 3px solid #000;
    width: 70%;
    float: left;
}

【讨论】：

我到底是在哪里添加的，我是在将它添加到我的 .gridContainer 类中吗？
将它添加到样式表文件的顶部。 * 表示每个元素。
* 表示它是一个全局规则。
尼克，你是如何突出显示“*”的？我是新来的！ :(
在要突出显示的内容周围使用反引号``

【解决方案2】：

如果你让左边的容器固定宽度会有所帮助。如果您愿意，您可以随时将这两个 div 包装在另一个 div 中，您可以在其中设置最大宽度。

【讨论】：

【解决方案3】：

也许你可以使用position:absolute？

或者只是使用table 标签来设计它？ W3C 并不打算在不久的将来丢弃该标签。

这不是浮动块的正常行为，因为它们放置在任何正常块之前并且不使用正常的父容器上下文。

【讨论】：

【解决方案4】：

您可以使用 Frameset 将页面划分为框架，然后将 css 添加到它的样式。

【讨论】：