在容器内右侧对齐响应div [英] Align responsive div to the right within container

问题描述

我有一个父div和两个子div。我的目标是将一个div对齐，将另一个div对齐到右边，并使响应。

我在这种类型的设置中似乎找不到将第二个对齐的常规方法：

 < div id =container> 
 
< div id =middle>居中到中< / div> 
 
< div id =right>我想要向右边< / div> 
 
< / div> 
  

CSS：

 code> #container {
 position：relative; 
 width：100％; 
} 
 
 #middle {
 margin：0 auto; 
 position：relative; 
 width：100％; 
 max-width：150px; 
 height：300px; 
} 
 
 #right {
 max-width：150px; 
 width：100％; 
} 
  

这里是 jsFiddle 。

解决方案

添加了一个伪元素作为左列，所以布局变成了[left] + [中间] + [右]并为父项设置表，为子项设置 table-cell

JSFiddle演示

  #container {display：table; table-layout：fixed; width：100％;}＃container：before，#middle，#right {display：table-cell;}＃container：before {content：;}＃middle {background：aqua; width：50％;}＃right {background：yellow;}  

 < div id =container> < div id =middle>居中到中< / div> < div id =right>我想要向右边< / div>< / div>  

/ p>

有另一种方法使用 flexbox ，可以找到 在这里 。

I have one parent div and two child divs. My aim is to center one div and align the other div to the right and make both responsive.

I can't seem to find the conventional way to do align the second one to the right within this type of setup:

<div id="container">

    <div id="middle">Centered to middle</div>

    <div id="right">I want to be to the right</div>

</div>

CSS:

#container {
    position: relative;
    width: 100%;
}

#middle {
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width:150px;
    height:300px;
}

#right {
    max-width:150px;
    width:100%;
}

Here is a jsFiddle. How do we crack this puzzle?

解决方案

Added a pseudo element as left column, so the layout becomes to [left] + [middle] + [right] and set table for the parent and table-cell for the children.

JSFiddle Demo

#container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
#container:before, #middle, #right {
    display: table-cell;
}
#container:before {
    content:"";
}
#middle {
    background: aqua;
    width: 50%;
}
#right {
    background: yellow;
}

<div id="container">
    <div id="middle">Centered to middle</div>
    <div id="right">I want to to be to the right</div>
</div>

There is another approach by using flexbox, can be found here.

这篇关于在容器内右侧对齐响应div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！