1

我想在一行中显示 2 个 div。我有一个父 div 和两个子 div。我想保持第一个子 div 和父 div 的宽度相等。所以标题（第一个子div的标签）总是显示父div的中间位置，我想在父div的同一行的右侧显示第二个子div。（条件总是第一个子div的标签应该显示中间父 div)。这里是jsfiddle.

在此处输入图像描述

4

2 回答 2

1

如果我正在为网站设计此页眉部分，并且我希望在各种元素的样式上具有一定的灵活性，那么我将从这里开始。

对于我的 HTML：

<div class="head">
    <div class="innerfirst">
         <h1>ABCDEF GHIJ</h1>
    </div>
    <div class="innersecond">
        <label>RIGHT1</label>
        <label>RIGHT2</label>
    </div>
</div>

我会将页面标题放在<h1>标签中，这样我就可以调整字体大小、填充、背景颜色等。事实上，您可以在标题行和各种背景图像下方添加标签行。拥有.innerfirst并h1为您提供了相当多的灵活性。

在这种<label>情况下，标签在语义上没有意义，但也许您稍后会有输入字段，例如搜索框。

对于 CSS：

.head {
    background-color:#2191C0;
    width: 100%;
    height: 85px;
    position: relative;
}

以上很好，设置position: relative为可以对其中一个子元素使用绝对定位。固定高度是个好主意，可以更轻松地垂直调整元素。

.innerfirst {
}
.innerfirst h1 {
    text-align: center;
    color: #FCFCFC;
    padding-top: 10px; /* You could also use a margin... */
}

默认情况下，.innerfirst将具有 100% 的宽度，因为它是一个流入块元素，与该h1元素相同。您可以将文本居中h1，并根据需要调整颜色、填充和边距。

.innersecond {
    border: 2px solid lightgray;
    color: white;
    position: absolute;
    width: 25%; /* Set this or by default it will shrink-to-fit content */
    height: 61px; /* Set this or by default it will shrink-to-fit content */
    top: 5px;
    right: 5px;
    padding: 5px;
}

您可以做的是创建一个文本框并将其绝对定位在右侧。设置高度和宽度是个好主意，否则，由于绝对定位，div将缩小以适应内容，这有时很有用。由于.innersecond您position: relative在.head.

.innersecond label {
    display: block; /* optional if you want block behavior */
    border: 1px dotted white;
}

最后，如果您希望label标签表现得像块，display: block请根据您的设计要求使用和样式。

供参考，演示小提琴：http: //jsfiddle.net/audetwebdesign/qpb9P/

于 2013-06-06T11:28:54.657 回答
1

这是一个更新的jsfiddle。阅读display财产！

于 2013-06-06T10:59:00.843 回答