Question

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

我打算通过尽可能多的方式来做。可能首先只有一些div's和float's。然后使用CSS表，然后使用flexbox，最后使用CSS网格。

我甚至不知道是否可以与所有人或任何人一起做，但我只是在尝试。

所以，这就是我现在所拥有的。

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

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

以下是the code on 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>

Answer 1

好的，所以在行和列中打破它，并使用clearfix hack，你在行中遇到溢出。这是为了确保没有任何内容消失。

创建一个名为row的类：

/*-- cleafix hack -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
    clear:both;
}

现在将100％宽度划分为12列，因此100/12我们得到大约8.33％，让我们在CSS中再创建12列类：

.col-1{ width: 8.33%; }
.col-2{ width: 16.66%; }
.col-3{ width: 24.99%; }
.col-4{ width: 33.32%; }
.col-5{ width: 41.65%; }
.col-6{ width: 49.98%; }
.col-7{ width: 58.31%; }
.col-8{ width: 66.64%; }
.col-9{ width: 74.97%; }
.col-10{ width: 83.3%; }
.col-11{ width: 91.63%; }
.col-12{ width: 100%; }

现在确保所有列都向左浮动：

[class*='col-'] {
    float: left; 
    min-height: 1px; 
    /*-- gutter -- */
    padding: 12px;
}

现在所有类都将box-sizing作为border-box应用于所有类以使其工作。确保这个类是所有内容的父级，它应该在顶部：

.grid-container *{
        box-sizing: border-box; 
}

现在你的HTML应该是这样的：

<div class="grid-container">
    <div class="row">
        <div class="col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
        </div>
        <div class="col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
        </div>
    </div>
    <div class="row">
        <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat ut accusantium veritatis corporis molestiae illo optio consequatur ex quae praesentium at, dicta natus, voluptatibus rerum necessitatibus aliquid ratione. Voluptate, cumque.</div>
        <div class="col-4">Your image here</div>
        <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam facilis est sunt molestiae incidunt, blanditiis vitae sapiente odio ab, reprehenderit mollitia repellat dolorem eius quo laborum rerum eligendi soluta.</div>
    </div>
    <div class="row">
        <div class="col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
        </div>
        <div class="col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
        </div>
    </div>
</div>

这是一个有效的jsfiddle - https://jsfiddle.net/nnhzentg/

Answer 2

此方法使用href。您复制图像并通过设置负column-count重叠它们。

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

＆＃13;

margin

＆＃13;

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

＆＃13;

使用CSS创建双柱杂志布局

2 个答案: