HTML CSS將div的中間水平對齊到另一個div一側

Question

我正在嘗試實現以下結果：
在水平方向上，div 2的中間與div 1的右側對齊

_______________________________________
| div 1 _________ | _______
| | div 2 | |
| | | |
| | _________ | _______ |
| ______________________________________ |

div的寬度將基於其他約束條件進行設置，但是無論它們的大小如何，我希望它們保持這種配置。

我想要一個純CSS3解決方案（無需調整JavaScript大小...）

請注意，此問題與垂直對齊無關。

如果您有解決方案，請告訴我。

謝謝。

Answer 1

使用“ position”屬性是一種選擇。 我不確定這是否可以解決您的問題：

例

div{
    height:400px;
    width:400px;
    background:blue;
    position:relative;
}

div div{
    width:50%;
    height:50%;
    background:skyblue;
    position:absolute;
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

Answer 2

您可以使用以下transform: translate CSS設置為left: 100%時，將CSS內部元素移動到正確的位置left: 100% ：

 html, body { width: 100%; height: 100% } div { position: relative; border: 2px solid #f00; overflow: visible; } #div1 { width: 50%; height: 33%; } #div2 { width: 50%; height: 50%; border-color: #0f0; } #div2 { position: absolute; left: 100%; top: 50%; transform: translate(-50%,-50%) } You could use the `transform: translate` to position the inner element when setting the position of the element at `left: 100%`. 

 <div id="div1"> <div id="div2"></div> </div> 

Answer 3

將div 2設為div 1的子級，使用絕對定位並在CSS中將calc（）用作值。

.div1 {
  position: relative;
  border: 1px dashed black;
  width:150px;
  height:50px;
}
.div2 {
  position: absolute;
  right:calc(-50% + 25px);
  top: calc(100% - 75%);
  border: 1px dashed green;
  width:100px;
  height:50%;
}

這是一個jsfiddle