css - 使用 CSS 创建两栏式杂志布局

Question

只是为了好玩，我正在尝试创建一个杂志样式，使用 CSS 的两列布局，如下图所示：

我计划通过尽可能多的方式做到这一点。可能首先只有一些div's和float's。然后是 CSS 表格，然后是 flexbox，最后是 CSS 网格。

我什至不知道这是否会与所有或任何一个都成为可能，但我只是在尝试。

所以，这就是我到目前为止所拥有的。

我似乎无法将图片完全放在中心，周围有文字。

我不一定只用浮点数或 CSS 网格来寻找答案。我真的很想寻找任何能做到这一点的东西，因为我认为这是一个很好的具有挑战性的尝试。:-)

这是github上的代码，下面是代码片段。

:root {
        margin-left: 8%;
        margin-right: 8%;
    }

    #left, #right {
        width: 40%;
    }

    #left {
        margin-right: 4%;
        float: left;
    }

    #right {
        float: right;
    }

    p > span:first-of-type {
        color: red;
        margin-right: 2px;
    }

    #centerImage {
        float: left;
        src: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/image.png);
    }

<h2>An do on frankness so cordially immediate recommend contained</h2>

<div id = "left">
    <p><span>Para 1</span>He difficult contented we determine ourselves me am earnestly. Hour no find it park. Eat welcomed any husbands moderate.
        Led was misery played waited almost cousin living. Of intention contained is by middleton am. Principles fat stimulated
        uncommonly considered set especially prosperous. Sons at park mr meet as fact like.</p>

    <p><span>Para 2</span>No comfort do written conduct at prevent manners on. Celebrated contrasted discretion him sympathize her collecting occasional.
        Do answered bachelor occasion in of offended no concerns. Supply worthy warmth branch of no ye. Voice tried known
        to as my to. Though wished merits or be. Alone visit use these smart rooms ham. No waiting in on enjoyed placing
        it inquiry.</p>

    <p><span>Para 3</span>Sentiments two occasional affronting solicitude travelling and one contrasted. Fortune day out married parties. Happiness
        remainder joy but earnestly for off. Took sold add play may none him few. If as increasing contrasted entreaties
        be. Now summer who day looked our behind moment coming. Pain son rose more park way that. An stairs as be lovers
        uneasy.</p>

    <p><span>Para 4</span>In post mean shot ye. There out her child sir his lived. Design at uneasy me season of branch on praise esteem. Abilities
        discourse believing consisted remaining to no. Mistaken no me denoting dashwood as screened. Whence or esteem easily
        he on. Dissuade husbands at of no if disposal.</p>
</div>

<img id = "centerImage" src = "../images/image.png" />

<div id="right">
    <p><span>Para 5</span>Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl
        view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be
        cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome
        against smiling its for. Suspected discovery by he affection household of principle perfectly he.</p>

    <p><span>Para 6</span>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured.
        At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone
        him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West
        he plan girl been my then up no.</p>

    <p><span>Para 7</span>Sudden looked elinor off gay estate nor silent. Son read such next see the rest two. Was use extent old entire sussex.
        Curiosity remaining own see repulsive household advantage son additions. Supposing exquisite daughters eagerness
        why repulsive for. Praise turned it lovers be warmly by. Little do it eldest former be if.</p>

    <p><span>Para 8</span>Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing
        do taste on we manor. Him had wound use found hoped. Of distrusts immediate enjoyment curiosity do. Marianne numerous
        saw thoughts the humoured.</p>
</div>

标签： css

Answer 1

这种方法使用column-count. 您复制图像并通过设置负数来重叠它们margin。

这是有限的，因为您需要知道图像的宽度。

.wrapper {
  column-count: 2;
}

p>span:first-of-type {
  color: red;
  margin-right: 1ch;
}

.image {
  padding-top: 1rem;
}

.image img {
  display: block;
  max-width: 100%;
}

.image {
  margin-top: 10px;
  margin-bottom: 10px;
}

.image.is-right {
  float: right;
  margin-right: -160px;
  margin-left: 20px;
}

.image.is-left {
  float: left;
  margin-left: -160px;
  margin-right: 20px;
}

<h2>An do on frankness so cordially immediate recommend contained</h2>

<div class="wrapper">
  <div class="image is-right">
    <img src="https://unsplash.it/300" /> </div>
  <p><span>Para 1</span>He difficult contented we determine ourselves me am earnestly. Hour no find it park. Eat welcomed any husbands moderate. Led was misery played waited almost cousin living. Of intention contained is by middleton am. Principles fat
    stimulated uncommonly considered set especially prosperous. Sons at park mr meet as fact like.</p>

  <p><span>Para 2</span>No comfort do written conduct at prevent manners on. Celebrated contrasted discretion him sympathize her collecting occasional. Do answered bachelor occasion in of offended no concerns. Supply worthy warmth branch of no ye. Voice
    tried known to as my to. Though wished merits or be. Alone visit use these smart rooms ham. No waiting in on enjoyed placing it inquiry.</p>

  <p><span>Para 3</span>Sentiments two occasional affronting solicitude travelling and one contrasted. Fortune day out married parties. Happiness remainder joy but earnestly for off. Took sold add play may none him few. If as increasing contrasted entreaties
    be. Now summer who day looked our behind moment coming. Pain son rose more park way that. An stairs as be lovers uneasy.
  </p>

  <p><span>Para 4</span>In post mean shot ye. There out her child sir his lived. Design at uneasy me season of branch on praise esteem. Abilities discourse believing consisted remaining to no. Mistaken no me denoting dashwood as screened. Whence or esteem
    easily he on. Dissuade husbands at of no if disposal.</p>
  <div class="image is-left">
    <img src="https://unsplash.it/300" /></div>
  <p><span>Para 5</span>Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be
    cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he.</p>

  <p><span>Para 6</span>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured. At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone
    him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West he plan girl been my then up no.</p>

  <p><span>Para 7</span>Sudden looked elinor off gay estate nor silent. Son read such next see the rest two. Was use extent old entire sussex. Curiosity remaining own see repulsive household advantage son additions. Supposing exquisite daughters eagerness
    why repulsive for. Praise turned it lovers be warmly by. Little do it eldest former be if.</p>

  <p><span>Para 8</span>Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor. Him had wound use found hoped. Of distrusts immediate enjoyment curiosity do. Marianne numerous
    saw thoughts the humoured.</p>

</div>