html - 如何避免使用 css 列属性将文本拆分到另一列？

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>

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

标签： htmlcss

Answer 1

整体设计很奇怪，我不明白它背后的逻辑，就像一个用 div 制作的非常古老的学校盒子模型，加上它背后有一个非常奇怪的概念，比如厘米来测量宽度和高度，而不是视口或 rem。

现在，您需要的不能按照您想要的方式完成，但可以完成

* {
           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 {
           display: grid;
           grid-template-columns: 1fr 1fr;           
           break-inside: avoid;
       }

       #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;
           border-right: 1px solid black;
           padding-right: 7px;
           margin-right: 5px;
       }

       #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.lteration 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 Llteration 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 Llte le of text. All the Llte le of text. All the Llte le of text. All the Llte
            </div>
        </div>

请考虑重新制作这个项目，避免使用你正在做的那些奇怪的事情，比如在 H1 标签中嵌套图像，厘米作为宽度和高度，那个奇怪的跨度列等等......它在 Firefox 和移动设备上看起来非常错误。 在这里你可以看到它在 CodePen 上是如何工作的