Question

我正在尝试使用css coulmn属性创建具有不同布局的页面，但是不幸的是，当我在第一列上插入图片时，文本会拆分为第二列

 * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        body {
            width: 21cm;
            min-height: 29.7cm;
            padding: 1cm;
            margin: 1cm auto;
            border-radius: 5px;
            background: white;
        }

        .main-container {
            display: flex;
            justify-content: center;
        }

        .main-container>#mainStory {
            -webkit-column-width: 100px;
            -moz-column-width: 100px;
            column-width: 200px;
            column-rule: 1px solid black;
            padding: 2px;
            text-align: justify;
            text-justify: inter-word;
        }

        .inner-container {
            column-count: 2;
            column-rule: 1px solid black;
            break-inside: avoid;
        }

        .inner-container>#leftStory {
            -webkit-column-width: 100px;
            -moz-column-width: 100px;
            column-width: 150px;
            column-rule: 1px solid black;
            padding: 2px;
            float: left;
            text-align: center;
            text-align: justify;
            text-justify: inter-word;
        }

        .inner-container>#rightStory {
            -webkit-column-width: 100px;
            -moz-column-width: 100px;
            column-width: 150px;
            column-rule: 1px solid black;
            padding: 2px;
            float: right;
            text-align: justify;
            text-justify: inter-word;
        }

        h1,
        h3 {
            column-span: all;
            text-align: center;
        }
        h3>img{
            width:100%;
        }

        h1>img {
            width: 100%;
        }

        @page {
            size: A4;
            margin: 0;
        }

        @media print {
            html,
            body {
                width: 210mm;
                height: 280mm;
            }
        }

    <div class="main-container">
        <div id="mainStory">
            <h1>What is Lorem Ipsum?
                <br/>
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?cs=srgb&dl=beach-exotic-holiday-248797.jpg&fm=jpg"/>
            </h1>
            <b>Lorem Ipsum </b>
            is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
            since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
            unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem
            Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it
            over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one
            of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
            word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
            1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This
            book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
            \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.
        </div>
        <br/>

    </div>
    <div class="inner-container">
        <div id="leftStory">
            <h3>Why do we use it?<br/><img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?cs=srgb&dl=abandoned-forest-industry-34950.jpg&fm=jpg"/></h3>
            <b>Contrary to popular belief </b>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
            been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
            typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
            containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
            versions of Lorem Ipsum.
        </div>
        <div id="rightStory">
            <h3>Where can I get some?</h3>
            <b>Contrary to popular belief </b>There are many variations of passages of Lorem Ipsum available, but the majority
            have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly
            believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing
            hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
            as necessary, making this the first true generator on the Internet.
        </div>
    </div>

当我在栏左下方插入图像时，请检查小提琴，文字将进入第二栏。我希望当图像很大时，文本将根据该图像拆分到该列中，而不是在第二列中拆分。

Answer 1

总体设计很奇怪，我不了解其背后的逻辑，就像用divs制作的每个老旧盒子模型一样，而且在场景背后有一个非常奇怪的概念，例如厘米来测量宽度和高度，而不是视口或雷姆。

现在，您无法完成所需的工作，但可以完成

style="width:200px"

<div id="mytable1" class="panel-body" style="width:200px">

请考虑重新制作此项目，避免使用那些古怪的东西您正在做的事情，例如将图像嵌套在H1标签内，厘米如宽度和高度，那奇怪的跨度柱等等。。。看起来非常可怕错误在Firefox和移动设备上错误。 here you can see how it works on CodePen

Answer 2

您可以添加以下CSS

img {float：left; }

如何避免使用CSS列属性将文本拆分为另一列？

2 个答案: