Question

我需要做的是解释有点复杂，但我会尽我所能。我需要在一个页面中容纳3个不同的div，但是我的左边div需要比其他div更多的空间，因此并排对齐是不切实际的，因为它们是彼此叠加的。我需要在左边有一个更大的div，而另外两个在右边堆叠在一起。但我无法将这两个div合并为一个并将其浮动。因为我需要顶部垂直对齐在左侧的顶部，而底部垂直对齐在左侧的底部，而这两个（顶部和底部）需要在它们的右侧对齐。不确定我是否能够解释，所以这是一个图像说明我想要完成的事情：

所以，你看，左边一个占据了大部分空间，较小的一个占据了顶部和底部，同时也在它们的右侧对齐，然后是一个空白区域。这是我已有的代码：

<div style="display: inline-block;">
  <h3>Left Div</h3>
  <input type="text" name="name">
  <input class="button" type="submit">
</div>

<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
  <h3>Top right div</h3>
  <input type="text" name="name2">
</div>

<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
  <h3>Bottom right div</h3>
  <input type="text" name="name3">
  <input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>

我还想说，在途中（当我只有2个div）它按照我想要的方式工作，当我添加第三个div时出现了问题，所以我认为这就是问题在于。请注意，我是html的新手，如果这只是一个简单的修复，我很抱歉。

Answer 1

我认为关键是高度相等的部分，您可以使用CSS3 flexbox来解决它。对于右侧顶部/底部div，您可以将两个div包装到另一个div中。请参阅下面的简单演示。

<强> jsFiddle

div {
  border: 1px solid aqua;
}
.container {
  display: flex;
}
.left, .right {
  flex: 1;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div class="left">
    <h3>Left Div</h3>
    <br><br><br><br><br><br><br><br><br><br>
  </div>
  <div class="right">
    <div>
      <h3>Top right div</h3>
    </div>
    <div>
      <h3>Bottom right div</h3>
    </div>
  </div>
</div>

Answer 2

这就是你想要它的方式....作为图像......

<html>
<head>
<style>
    #i{
        background-color:"red";
        width:700px;
        height:600px;
        float:left;

    }

    #a{
        background-color:"black";
        width:600px;
        height:300px;
        float:right;
        position:relative;
        display:inline;

    }

    #b{
        background-color:"blue";
        width:600px;
        height:250px;
        float:right;
        margin-top:50px;
        position:relative;
        display:inline;

    }

</style>

</head>
<body>
<div id = "i">
<p>hello</p>
</div>
<div id = "a">
<p>hello</p>
</div>
<div id = "b">
<p>hello</p>
</div>
</body>
</html>

Answer 3

一种方法是使用负边际。内联块元素使得在同一垂直轴上具有多个div很困难，因为两者都排列着较大的div。这适用于你所要求的：

<div id = "left" style="display: inline-block;">
        <h3>Left Div</h3>
        <input type="text" name="name">                                            
        <input class="button" type="submit">
</div>

<div id = "top-right" style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
        <h3>Top right div</h3>
        <input type="text" name="name2">
</div> 

<div id = "bottom-right" style="display: inline-block; vertical-align: bottom; margin-left: -182px">
        <h3>Bottom right div</h3>
        <input type="text" name="name3" >
        <input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>

小提琴：https://jsfiddle.net/an9ra3mb/2/

将2个div对齐并向右对齐

3 个答案: