css - 对齐两个 DIV 并使用整个页面宽度

标签 css

我需要在父 div 中对齐两个 div。

父 div 应占满页面宽度,两边留有边距。

第一个子 div 应该是 100px 宽和 4px 边距。第二个子 div 必须占据剩余的空间,右侧有 4px 的边距。

如何为此编写 CSS?到目前为止我已经写完了

div.parent {

        width: ?;

        border:1px black solid;

        position: relative;

        clear: both;

        }

<div class="parent">

<div class="child1"> </div>

<div class="child2"> </div>

最佳答案

为什么不直接给父 div 添加边距呢?

<div style="height: 100px; width: 100%; padding: 4px; background-color: Yellow;">
    <div style="height: 100%; width: 100px; background-color: Lime; position: relative; float: left; border: solid 1px black; border-right-width: 0px;"></div>
    <div style="height: 100%; width: 100%; background-color: Red; border: solid 1px black; border-left-width: 0px;"></div>
</div>

关于css - 对齐两个 DIV 并使用整个页面宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4049265/

相关文章:

javascript - 使 div 高度动态化,这样就不会与额外内容产生差距

css - 可以为背景图像设置最大宽度吗? (想要缩小背景图像,但不放大)

javascript - 查询 : How to force the click of s specific item of a radiobox

html - 悬停不适用于 SVG 路径的未填充区域

javascript - SlickNav 菜单,每个 li 都有特定的颜色背景?

javascript - 表格单元格中 iframe 底部的奇怪 "padding"效果

html - Bootstrap : align elements to bottom of column

html - 具有相似 CSS 的 div 和 table sibling 的位置不同

html - 如何使我的导航栏居中?

html - 添加绝对位置的div时无法点击链接