Question

我想水平对齐3个不同的子div。这3个div包含1个图像（高度和宽度px）。有一个链接悬停每个div（但我希望我的onmouseover只在图像上，而不是在div中留下的空间）。所以我不希望我的div占据每个屏幕的33％。

但我希望我的左图完全在屏幕的左侧，我的中央图像在中央，我的第三张图像完全在屏幕的右侧

我的父div是绝对的，而子div与float是相对的（我不知道是不是好事）。

我的例子在这里： https://jsfiddle.net/mytom/eabgewnf/

我的HTML：

<div class="controls">
    <div class="controls_prev"></div>
    <div class="controls_toggle"></div>
    <div class="controls_next"></div>
</div>`

我的CSS：

.controls {
    position:absolute;
    width:100%;
    height:100px;
    top:50%;
    margin-top:-37px;
    display:block;
}
.controls_prev {
    opacity: 0.6;
    position:relative;
    width:78px;
    height:100px;
    float:left;
    border: solid 1px #40b2d6;
}
.controls_toggle {
    opacity: 0.6;
    position:relative;
    width:78px;
    height:100px;
    margin:0px auto !important;
    border: solid 1px #40b2d6;
}
.controls_next {
    opacity: 0.6;
    position:relative;
    width:78px;
    height:100px;
    float:right;
    border: solid 1px #40b2d6;
}

- ＆GT;我的右侧div没有正确放置。

怎么做？

Answer 1

我会做以下事情。

使用绝对定位将.controls_prev放在左侧，将.controls_next放在右侧。

将.controls_toggle保持在常规流程中，并使用margin: 0 auto将其居中。这很有效，因为.controls_prev和.controls_next都具有相同的宽度。

.controls {
  position: absolute;
  width: 100%;
  height: 100px;
  top: 50%;
  margin-top: -37px;
  display: block;
  border: 1px dotted blue;
}
.controls_prev {
  opacity: 0.6;
  position: absolute;
  width: 78px;
  height: 100px;
  top: 0px;
  left: 0px;
  border: solid 1px #40b2d6;
}
.controls_toggle {
  opacity: 0.6;
  width: 78px;
  height: 100px;
  margin: 0 auto;
  border: solid 1px #40b2d6;
}
.controls_next {
  opacity: 0.6;
  position: absolute;
  width: 78px;
  height: 100px;
  top: 0px;
  right: 0px;
  border: solid 1px #40b2d6;
}

<div class="controls">
  <div class="controls_prev"></div>
  <div class="controls_toggle"></div>
  <div class="controls_next"></div>
</div>

Answer 2

列表中的更改太多，但这应该有效。请注意标记的重新排序。

.controls {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: -37px;
  background: #ddd;
}
.controls_prev {
  opacity: 0.6;
  position: relative;
  width: 78px;
  height: 100px;
  float: left;
  border: solid 1px #40b2d6;
}
.controls_toggle {
  opacity: 0.6;
  position: relative;
  width: 78px;
  height: 100px;
  margin: 0 auto;
  border: solid 1px #40b2d6;
}
.controls_next {
  opacity: 0.6;
  position: relative;
  width: 78px;
  height: 100px;
  float: right;
  border: solid 1px #40b2d6;
}

<div class="controls">
  <div class="controls_prev"></div>
  <div class="controls_next"></div>
  <div class="controls_toggle"></div>
</div>

Answer 3

试试这个。

＆＃13;

.controls {
  position: absolute;
  width: 100%;
  height: 100px;
  top: 50%;
  margin-top: -37px;
  display: table;
  table-layout: fixed;
}
.align {
  display: table-cell;
  vertical-align: top;
  width: 100%;
  padding:3px; /* just for show */
}
.inner {
  border: solid 1px #40b2d6;
  opacity: 0.6;
  height: 100px;
}

＆＃13;

<div class="controls">
  <div class="controls_prev align">
    <div class="inner"></div>
  </div>
  <div class="controls_toggle align">
    <div class="inner"></div>
  </div>
  <div class="controls_next align">
    <div class="inner"></div>
  </div>
</div>

＆＃13;

Answer 4

我已经更新了你的小提琴，将每个div的显示设置为table-cell，并将display：table添加到容器中。这就是你要追求的吗？

https://jsfiddle.net/eabgewnf/17/

CSS：

.controls{
    position:absolute;
    width:100%;
    height:100px;
    top:50%;
    margin-top:-37px;
    display:table;
}

.controls_prev{
    display:table-cell;
    opacity: 0.6;
    height:100px;
    border: solid 1px #40b2d6;
}

.controls_toggle{
    display:table-cell;
    opacity: 0.6;
    height:100px;
    top:0px;
    left:0px;
    border: solid 1px #40b2d6;
}

.controls_next{
    display:table-cell;
    opacity: 0.6;
    height:100px;
    border: solid 1px #40b2d6;
}

HTML：

<div class="controls">
    <div class="controls_prev">left</div>
    <div class="controls_toggle">this is the center</div>
    <div class="controls_next">right</div>
</div>

Answer 5

为了达到这个目的，我会使用一个表，因为它非常有用。如果将表格宽度设置为100vw（屏幕的100％）并根据需要使用百分比。

.controls{
    position:absolute;
    width:100vw;
    height:100px;
    top:50%;
    margin-top:-37px;
    display:block;
    table-layout: fixed;
}

.controls_prev{
    opacity: 0.6;
    width:20vw;
    height:100px;
    top:0px;
    left:0px;
    border: solid 1px #40b2d6;
}

.controls_toggle{
    opacity: 0.6;
    width:20vw;
    height:100px;
    top:0px;
    left:0px;
    border: solid 1px #40b2d6;
}

.controls_next{
    opacity: 0.6;
    width:20vw;
    height:100px;
    top:0px;
    right:0px;
    border: solid 1px #40b2d6;
}

.controls_separation{
    width:20vw;
}

<table>
    <tr class="controls">
        <td class="controls_prev"></td>
        <td class="controls_separation"></td>
        <td class="controls_toggle"></td>
        <td class="controls_separation"></td>
        <td class="controls_next"></td>
    </tr>
</table>

如何在父div中对齐3个子div

5 个答案: