html - CSS - 长文本会降低内容

Question

我正在使用嵌套的 div 元素，其样式类似于包含行和单元格的表格。在每一个中，都会有一个复选框、一个图像和一些文本内容。如果文本内容长于图像宽度，则包含图像和内容的 div 会发生碰撞，使其不再与复选框内联。

我希望文本在此之前换行。

内容实际上是动态的(使用 ASP.NET)，所以我无法固定容器的宽度或使用 JavaScript。

我创建了一个 JSFiddle 来复制我遇到的问题:

https://jsfiddle.net/L1h0y7yn/

.table {
    display: table;
    width: 800px;
    height: 100%;
    table-layout: fixed;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding-top: 24px;
    border: 1px solid red;
    overflow: hidden;
}

input {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.right {
    display: inline-block;
    vertical-align: top;
}

.image {
    width: 120px;
    height: 120px;
    background-color: darkcyan;
}

.content {
	
}

<div id="table" class="table">
    <div id="row_1" class="row">
        <div id="cell_1" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_2" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_3" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_4" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some longer block of text content.
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

如果您决定图像的宽度为 120px，那么您可以将内容设置为相同的宽度以将其“包裹”在表格单元格中。

.content {
    width: 120px;
}

.table {
    display: table;
    width: 800px;
    height: 100%;
    table-layout: fixed;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding-top: 24px;
    border: 1px solid red;
    overflow: hidden;
}

input {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.right {
    display: inline-block;
    vertical-align: top;
}

.image {
    width: 120px;
    height: 120px;
    background-color: darkcyan;
}

.content {
	width: 120px;
}

<div id="table" class="table">
    <div id="row_1" class="row">
        <div id="cell_1" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_2" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_3" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_4" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some longer block of text content.
                </div>
            </div>
        </div>
    </div>
</div>