使div在保持流量的同时占用上面兄弟的动态宽度

Question

我正在用HTML格式化产品页面。我尝试在照片下方制作照片占据照片的宽度是为了使用绝对定位。这很好用，直到我得到更长的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元素占用其包含表的宽度（而不是基于其自身的文本数量延伸，如{ {1}}元素确实）。

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

block

我的解决方案使两个元素表相关的元素，描述成.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，我将描述移到了表格的底部。

Answer 2

我认为您可以通过使用Bootstrap设置行和列来实现此目的，并根据您的需要改变列的大小。像这样：http://jsfiddle.net/4d5WR/124/

例如，对于图像，

<div class="row">
                    <div class="col-lg-3">
                <div class="image">
                    <img src="http://www.pet-care-portal.com/images/BallPythonT3Pic1.jpg">
                </div>
                        </div>
                    </div>