alignment 相关问题

我有一些文本，周围漂浮着两个图像： &... 我有一些文本，周围漂浮着两个图像：  <div id="wrapper"> <h2>Title</h2> <figure id="image1" style="float: left"> <img /> <figcaption>Caption</figcaption> </figure> <figure id="image2" style="float: right"> <img /> <figcaption>Caption</figcaption> </figure> <p>Lorem Ipsum</p> </div> 这就是它的样子：我想要的是将第一张或第二张图像放置在段落的最底部。像这样的东西（使用 Photoshop 制作）：我显然无法设置position: absolute，因为文本将不再漂浮在图像周围。我无法将包装器显示为 flexbox，因为它将元素对齐一行（或多行）并破坏所有内容：我什至尝试将包装器显示为 table 并使用 display: table-cell; vertical-align: bottom 将图形与底部对齐，但在这种情况下浮动不再起作用，并且图形与中心对齐。我设法得到的唯一部分解决方案是在图中使用clear: both：这样做的问题是，当调整页面大小时，段落的高度会发生变化，图像不再位于其底部。我能找到的唯一类似的答案是这个，但它在我的情况下不起作用，因为我事先不知道段落高度。有什么想法可以让它发挥作用吗？预先感谢。您可以使用shape-outside来完成。 .container { display: flex;/* I need this to use height:100% */ } #image2 { height: 100%; /* take full height */ float: right; /* the below will allow the text to wrap around */ shape-outside: inset(calc(100% - 135px) 0 0 0); /* 135px is an approximation of the figure height */ /* move image and caption to bottom (the area kept by shape-outside) */ display: flex; flex-direction: column; justify-content:flex-end; } #wrapper { font-size: 20px; text-align: justify; } figure { margin: 10px; text-align: center; float: left; } p { margin: 0; } <div class="container"> <div id="wrapper"> <figure id="image1"> <img src="https://picsum.photos/id/1/100/100"> <figcaption>Caption</figcaption> </figure> <figure id="image2"> <img src="https://picsum.photos/id/1/100/100"> <figcaption>Caption</figcaption> </figure> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nunc ante, cursus ac aliquet id, aliquet vitae orci. Sed faucibus, lorem a dictum iaculis, quam dolor aliquam mauris, eu dapibus ligula tellus quis urna. Maecenas sed justo pharetra, fringilla ex a, scelerisque justo. Quisque augue tellus, volutpat vel suscipit et, porta eget neque. Mauris pretium nunc in augue porta, sed egestas risus scelerisque. Nullam tortor nisl, suscipit a enim sit amet, rutrum maximus mauris. Nullam maximus lectus ac magna suscipit, nec efficitur nunc finibus. Curabitur malesuada orci nec semper elementum. Sed dignissim, tortor vitae rhoncus tempor, arcu mi facilisis nibh, vel consequat odio ipsum non augue. Sed diam est, facilisis ut cursus eu rhoncus tempor, arcu mi facilisis nibh, vel consequat odio ipsum non augue. </p> </div> </div> 阅读我的文章了解更多详情：https://dev.to/afif/float-to-the-bottom-corners-i8l

html css alignment css-float vertical-alignment

回答 1 投票 0

纠正斐波那契平方的对齐方式，以在 R 中形成正确的螺旋结构

我正在努力在 R 中创建带有正方形的斐波那契螺旋。我已经成功生成了斐波那契序列并绘制了正方形，但对齐不正确。第一个正方形不是中心...

r ggplot2 alignment visualization fibonacci

回答 1 投票 0

无法使文本在象限中水平居中

我正在使用 Android Developer 练习 Kotlin，并陷入了 Compose quardant 项目。除了一些文本之外，一切都正常运行，看起来就像它应该的那样。屏幕被分割了...

android kotlin alignment text-alignment horizontal-alignment

回答 1 投票 0

容器未正确对齐且图像未正确显示

大家好，我正在尝试使网页看起来像下面的画布设计，但我得到了下面的第二张图片作为我的结果。我的画布设计我的结果显示了我当前的设计 HTML 代码