Question

我有这个布局，我正在努力安排。首先，我用一张桌子摆好桌子，在那里我可以把一切都放到我想去的地方。一个四角形的想法，每个盒子在中心像网格一样触摸。左上角的盒子贴在它的元素顶部，但是我能够使用vertical-align将其关闭。

然而，我意识到如果我想要一个流畅的布局并且能够“分解”布局以使每个块成为它自己的块元素，我将不得不从table设计切换到div设计。在与它进行了几个小时的摔跤之后，我设法将其处理成我需要的标准大分辨率屏幕（我还没有尝试将其缩小）。但是这个愚蠢的左上方框仍然停留在它的元素的顶部，我无法弄清楚如何降低它。

我已经尝试在它之前的div位置：相对，然后制作表position: absolute然后bottom: 0px，这不起作用。

我尝试了新的display: table-cell; Vertical-align: bottom;我以前从未见过的东西，那是行不通的。

我试过position: relative; top: 50%;这不起作用（我知道技术上只会集中它，但我只是想让它移动）

我记不清楚我还尝试了什么，但是只要垂直对齐一个div需要付出很多努力，这不仅仅是有点疯狂，你不觉得吗？

以下是我正在尝试做的一个示例。理论上左上方块应该位于它的div的底部，但它不是。这只是我尝试过的一个例子。

<div style="border: 3px solid blue; display: table; height: 200px; width: 75%">
  <div style="display: table-row; border: 3px solid green;" >
    <div style="float: left; width: 50%; display: table-cell; vertical-align: bottom;">Upper Left Block</div>
    <div style="float: right; width: 50%; display: table-cell;">Upper Right Block</div>
  </div>
  <div style="display: table-row; border: 3px solid orange;">
    <div style="float: left; width: 50%; display: table-cell;">Lower Left block</div>
    <div style="float: right; width: 50%; display: table-cell;">Lower Right Block</div>
   </div>
</div>

任何人都可以帮我制作这个div吗？

注意：右上方块中的对象是高度不一致的图像，它设置行的高度，因为它高于行中的内容左上方块，因此我无法将填充顶部设置为左上方块来解决我的问题。

修改：我已经回过头来简化我的页面以重新尝试Absolute Position方法，并且由于原因未知，它确实有效。我可以让左上方块中的信息位于div元素的“底部”，占据那里的20px填充。但！！它搞砸了我的主要div的宽度。整个容器应该是780px。一旦我实现了Absolute Position的东西，它就会使整个东西缩小大约30px，而我似乎无法让它再次展开。这似乎是一件小事，但它正在搞乱其他一些我不想再缩小的布局元素了，否则我觉得它们很难阅读。

在实施绝对定位之前，我甚至将包含div的大小调整为1000px，仍然将所有内容缩小到大约750px。为什么这样做，我该如何解决？

我现在就在这里：

<div style="width: 1000px; margin: 100px auto;">
    <div style="width: 100%; position: relative;">
        <table style="width: 49%; float: left; position: absolute; bottom: 25px;">
            <tr><td>Table Data Here</td></tr></table>
        <img id="image" style="width: 50%; float: right; margin-bottom: 20px;" src="http://lorempixel.com/output/animals-h-c-507-736-10.jpg"></div>
    </div>
    <div style="width: 100%; position: relative; clear: both;">
        <table style="width: 49%; float: left;"><tr><td>Table Data Here</td></tr></table></table>
        <table style="width: 49%; float: right;"><tr><td>Table Data Here</td></tr></table></table>
    </div>
</div>

最终编辑：好的，我终于明白了。我去了position: absolute; bottom: 0px;之前没有工作，因为我没有设置它坐在position: relative的div。然后它弄乱了我的布局。它正在缩小它，我无法将它扩展回来，我无法弄清楚原因。然后我读到我需要定义父div的大小，如果我想要具有绝对位置的div保持我想要的大小。所以我们在这里都很好。感谢大家的回应。

垂直对齐div不工作的方法

0 个答案: