CSS

Question

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

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

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

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

.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

这会设置文本可以达到的最大宽度，使其与其所在的图像相同，从而为其提供所需的文本换行

这是全部内容：

var x = $('.image').css('width');
$('.content').css('max-width', x)

    .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 {
      
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 2

我更新了你的fiddle。我将您的 .row 和 .cell 更改为 flexbox 容器

https://jsfiddle.net/L1h0y7yn/1/

.row {
  display: flex;
}

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

Answer 3

如果您决定图像的宽度为 120px，那么您可以在 table 单元格中将内容设置为与 "wrap it" 相同。

.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>

CSS - 长文本会降低内容

CSS - Long text bumps down content

html

overflow

word-wrap