Geek Answers Handbook

How to align 3 child divs in parent div

I want to align 3 different child divs horizontally. these 3 divs contain 1 image (with height and width px). There is a link to each div (but I want my onmouseover to be only above the image, and not over the space remaining in the div). Therefore, I do not want my div to occupy every 33% of the screen.

But I want my left image to be completely to the left of the screen, my central image to the center and my third image to the full on the right of the screen.

My parent div is absolute, and the child div is relative with a float (I don't know if this is good or not).

My example is here: https://jsfiddle.net/mytom/eabgewnf/

My HTML:

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

My 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;
}

-> My right div is placed incorrectly.

how to do it?

+4
5

.

, .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>
Hide result
+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>
Hide result
+1

, div- : 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>
0

, , . 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>
Hide result
0

.

.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;
}
<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>
Hide result
0

More articles:


All Articles