问break-inside:避免列；//不工作
EN

Stack Overflow用户

提问于 2019-07-25 09:04:21

回答 1查看 194关注 0票数 0

我正在尝试实现两列文本，尽管我希望控制文本中列的中断方式和位置。我有。

body {
}

#content {
    column-count: 2;
}

#left_col {
        break-inside:avoid-column;
}

#right_col {
}

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="winning_grunfeld_styles.css">
</head>

<body>
<header><h1>1 Exchange Variation</h1></header>
    
<div id = "content">
<div id = "left_col">
    <p>
        In current practice, the main line<br>
        of the Grunfeld Defense is the<br>
        Exchange Variation, beginning<br>
    </p>
        
    <table>
    <tr>
    <td>1</td><td>d4</td><td>f6</td>   
    </tr>
    <tr>
    <td>2</td><td>c4</td><td>g6</td>
    </tr>
    <tr>
    <td>3</td><td>Nc3</td><td>d5 (1)</td>
    </tr>
    </table>
    
    <p>
    &nbsp;&nbsp;&nbsp;White's first and most natural<br>
        reaction is acceptance of Black's<br>
        intention by<br>
    </p>
    <table>
    <tr>
    <td>4</td><td>cd</td><td>Nxd5</td>
    </tr>
    <tr>
    <td>5</td><td>e4</td><td>Nxc3</td>
    </tr>
    <tr>
    <td>6</td><td>bc</td><td></td>
    </tr>
    </table>
    
    <p>
    occupying the centre. This is the<br>
    starting position of the Exchange<br>
    Variation and of the material to<br>
    be discussed in this chapter.<br>
    </p>
</div><!-- end of left_col -->

<div id = "right_col">
    <p>
    According to classical principles,<br>
    White should stand better. This<br>
    </p>
    
</div><!-- end of right_col -->
</div><!-- end of content -->
</body>

</html>

这不能正常工作，因为"left_col“div的最后几行打印在屏幕的右侧(即右列...0_0)

文本“和本章中要讨论的材料的变化。”位于"left_col“目录中，该目录被设置为CSS "break-inside:avoid- column "，但它出现在第二列的顶部。确实很奇怪。对于为什么会这样，有什么建议吗？任何帮助都是非常感谢的。谢谢。

css

layout

html

回答 1

Stack Overflow用户

发布于 2019-07-25 11:10:10

如果内容已经在两个容器中，我相信有更清晰的方法将内容分成两列，但是为了回答您的问题，在这个特定的例子中，您要寻找的属性是使用break-after: column;而不是break-inside:avoid-column;

body {
}

#content {
    column-count: 2;
}

#left_col {
    break-after: column;
}

#right_col {
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57192982

复制

相似问题

问break-inside:避免列；//不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问break-inside:避免列；//不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问break-inside:避免列；//不工作
EN