html - 使div在保留流的同时占用上面兄弟的动态宽度

Question

我正在用 HTML 设计一个产品页面。我试图让照片下方的 desc 占据照片的宽度是使用绝对定位。在我得到更长的 desc 之前，这一直很有效，我记得它使元素脱离了流程，导致了下面的问题。应该怎么做？

我找不到包含我问题的垂直和动态方面的问题。如果您将其作为副本关闭，请提供链接。

更多详细信息:在顶部，它有一个包含两列的“元素详细信息”div。左栏有一张可变高度/宽度的照片。在其下方，我有一个可变大小的文本描述，我希望它的宽度与照片完全一样。右栏是带有最大宽度 div 的“元素详细信息”。在所有这些之下，我有更多的 div，它们应该占据整个宽度。

直播网址:http://www.morphmarket.com/snakes/ball-pythons/14074

HTML

<div class="detail-container">
    <div class="item-details">
        <div class="image-col">
            <div class="image">
                ...
            </div>

            <div class="desc">
                <b>Description.</b> {{ snake.desc }}
            </div>

        </div>

        <div class="details-col">
           ...
        </div>
    </div> <!-- item details -->
    <div class="store-details">
       ...
    </div>
</div> <!-- item container -->
<div class="more-from-store">
   ...
</div>

CSS

.snake-page {
    .detail-container {
        margin-top: 10px;
        //display: table-cell;
        width: 100%;
        .item-details {
            display: table-row;
            //display: table;
            //width: 1px;
            .image, div.desc, .details-col { 
                .white-box(); 
                margin: 10px 0px;
            }
            .image-col {
                display: inline-block;
                position: relative;
                .image {
                    position: relative;
                    .sold {
                        size: 10rem;
                    }
                    .img-thumbnail {
                    }
                }
                div.desc {
                    max-height: 150px;
                    padding: 10px;
                    position: absolute;
                    overflow:auto;
                    left: 0px;
                    right: 0px;
                    margin: 0 0 10px 0;
                }
            }
            .details-col {
                .title {
                    font-weight: bold;
                    font-size: 1.4em;
                    text-align: center;
                    margin-bottom: 10px;
                }
                font-size: 1.20em;
                max-width: 400px;
                padding: 10px;
                margin-left: 10px;
                display: inline-block;
                //display: table-cell;
                vertical-align: top;
                background: @white;
                .details {
                    .dl-horizontal {
                        @width: 120px;
                        dt {
                            width: @width;
                        }
                        dd {
                            margin-left: @width + 20px;
                        }
                    }
                    .label.trait {
                        margin-right: 0px;
                    }
                }
                .button-col {
                    div {
                        margin: 0 auto;
                        width: 85%;
                    }
                }
            }
        }
        .store-details {
            display: table-cell;
            width: 1px;
            > * {
                .white-box();
                margin: 0 0 10px 0;
                padding: 10px;
            }
            .store-policy {
            }
            .about-store {
            }
        }
    } // detail container
}

Answer 1

我找不到说明这一点的文档，但我们可以看到 table-caption 元素采用其包含表的宽度(而不是根据其自身的文本量进行拉伸(stretch))就像 block 元素一样)。

将其粘贴到您的 CSS 文件底部以查看它的实际效果(我覆盖了阻碍的属性。如果您采用此解决方案，您当然可以合并样式)。

.snake-page .detail-container .item-details .image-col {
  margin-top: 10px;
}
.snake-page .detail-container .item-details .image-col .image {
  display: table-row;
}
.snake-page .detail-container .item-details .image-col div.desc {
  position: static;
  display: table-caption;
  caption-side: bottom;
  margin-top: 5px;
}

我的解决方案使两个元素都与表相关，将描述放入 table-caption 并将图像放入 table-row，因此它们基本上充当一个表。通过提供描述 caption-side: bottom，我将描述移到了表格的底部。