Подтвердить что ты не робот

Как охватить изображение по нескольким столбцам в макете сайта CSS3?

Учитывая базовый четырехстолбцовый макет с простым непрерывным абзацем текста, а также только одно изображение, охватывающее три столбца, выравнивание по верхнему краю, как мы можем охватить наш образ за последние три столбца, чтобы наш текст автоматически перемещался вокруг изображения?

enter image description here

.quatroColumns{}             /* css multi column 4 columns */
.imageSpanning2Columns{}     /* align to top-right */
.imageSpanning3Columns{}     /* align to top-right */
.imageDescription{}          /* description box over image */

http://jsfiddle.net/Vbr9d/205/ (боль, чтобы найти, куда должно идти изображение: не простой и не элегантный старт!)
http://jsfiddle.net/Vbr9d/206/ (выглядит уродливо, но HTML начинает элегантно разделять изображение и текстовый прагр!)

* Забудьте старые версии браузера, кроме основных текущих: Firefox, Internet Explorer, Chrome, Safari. Любые идеи, направления или эксперименты приветствуются. Также приветствуются альтернативные реализации JavaScript для разделения текста абзаца на разные div.

4b9b3361

ОТВЕТЫ

Ответ 1

Это очищенное решение, которое должно работать во всех основных браузерах. Он передает абсолютное позиционное изображение вместо использования столбца, поскольку Firefox еще не поддерживает это.

/* Just to make it look a little nicer */
body {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  padding: 1em;
}


article {
  /* We're giving our article a max-width. This isn't needed if a parent already does this.*/
  max-width: 860px;
  
  /* Create a 4 column layout */
  -webkit-column-count: 4;
     -moz-column-count: 4;
     column-count: 4;

  /* Give each column a little added spacing */
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
     column-gap: 20px;
     
  /* To be able to absolute position the image we need to give the parent a position */
  position: relative;
  
  /* This pulls up the first column of text to align with the image */
  padding-top: 225px;
}

article img {
  /* Absolute position our image */
  position: absolute;

  /* Place it in the top right cornet */
  top: 0;
  right: 0;

  /* Give it a height of 200px, this can of course be change if needed. If you update the height here make sure you also change the padding-top of the article and the negative margin later down. */
  height: 200px;
  
  /* We only want the image to spread 3 columns in width, that 75% of the entire width. We also use 10px (half of the column-gap). */
  width: calc(75% - 10px);

}

/* Give the first paragraph a negative margin to pull it back up. (right now we're only using one parapgrah but if you'd want more in the future lets be specific here) */
article p:first-of-type {
  margin-top: -225px;
}

/* Some media queries to make it look nice on all resolutions */
@media screen and (max-width: 800px) {
  article {
    padding-top: 0;
    -webkit-column-count: 2;
       -moz-column-count: 2;
       column-count: 2;
  }
  article p:first-of-type {
    margin-top: 0;
  }
  article img {
    position: static;
    margin: 0 0 30px;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 600px) {
  article {
    -webkit-column-count: 1;
       -moz-column-count: 1;
       column-count: 1;
  }
}
<article>
  <img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" />
<p>Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta. nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.</p>
</article>

Ответ 2

Чтобы сохранить исходное предлагаемое решение с использованием столбца-столбца вместо абсолютного позиционированного изображения.

Здесь мое предлагаемое решение для этого. Единственное, что вам нужно знать, это высота изображения, это может быть не идеально, но я думаю, что это решение так же близко к совершенству, как и оно.

Для вычисления столбцов не используется javascript, для его работы не требуются дополнительные элементы или классы. Я разделил блок текста на несколько парафраз, так как считаю, что это более правильный способ сделать это. Однако это решение не зависит от нескольких абзацев, вы можете удалить их, и это все равно будет работать одинаково. Я просто случайно добавил абзацы, чтобы получить более естественный текст.

Ниже перечислены важные детали.

article{
  column-count: 4; /* Create 4 columns */

  img {
    /* For an image to work with column-span it needs to be a 
       block element */   
    display: block;

    /* Now we can let the image expand to all columns */
    column-span: all;

    /* We'll need to give the image a fixed height.
       A problem here is if we want a responsive layout. This wont 
       respect the aspect ratio of the image. That could be solve
       by only allowing an adoptive layout and set hard heights
       on the image. */
    height: 200px;

    /* Give it some margin to the columns under it */
    margin-bottom: 25px;

    /* Now comes the trick, first we want to push the image one 
       column to the right, that will be 25%, we're also adding
       some extra spacing to make it look nicer */
    margin-left: calc(25% + 10px); 

    /* Since we've pushed it one column to the right we only
       want it to take up 75% (3/4) of the total width. */
    width: calc(75% - 10px);
  }

  /* Lastly we want to give the first paragraph a negative margin
     equal to the image height. This will move the first column
     up to align with the top of the image. */
  p:first-of-type { margin-top: -($imageHeight+25); }
}

Полный, рабочий, пример

/* Just to make it look a little nicer */
body {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  padding: 1em;
}

article {
  max-width: 860px;
  -webkit-column-count: 4;
     -moz-column-count: 4;
          column-count: 4;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}
article img {
  display: block;
  -webkit-column-span: all;
     -moz-column-span: all;
          column-span: all;
  height: 200px;
  width: calc(75% - 10px);
  margin-bottom: 25px;
  margin-left: calc(25% + 10px);
}
article p {
  margin-bottom: 1.3em;
}
article p:first-of-type {
  margin-top: -225px;
}

@media screen and (max-width: 800px) {
  article {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
  article p:first-of-type {
    margin-top: 0;
  }
  article img {
    margin: 0 0 30px;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 600px) {
  article {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
  }
}
<article>
  <img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" />
  <p>Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum
    iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
  <p>Nam liber tempor cum soluta. nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam.</p>
  <p>Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi.</p>
  <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
    ad minim veniam.</p>
  <p>Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi.</p>
  <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.</p>
</article>

Ответ 3

Я думаю, что разделение текста на два блока в настоящее время является единственным решением. Базиально, вы плаваете изображение вправо, поместите первый разделитель столбцов с первым рядом с ним текстом, а затем разместите второй четырехразрядный diff с оставшимся текстом под ним.

Это решение работает в firefox!

HTML:

<div>
    <img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" class="imageSpanning3Columns"/>
</div>
<div>
    <p class="singleColumns border">Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in </p>
</div>
<div>
    <p class="quatroColumns border">vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.

  

CSS

.quatroColumns{             /* css multi column 4 columns */
    -webkit-column-count: 4; -webkit-column-gap: 20px; /* Chrome, Safari, Opera */   
    -moz-column-count: 4; -moz-column-gap: 20px; /* Firefox */
    column-count: 4; column-gap: 20px;
    width: 860px;
    font-size: 15px;
    text-align: justify;
}

.singleColumns{             /* css multi column 4 columns */
    -webkit-column-count: 1; -webkit-column-gap: 20px; /* Chrome, Safari, Opera */   
    -moz-column-count: 1; -moz-column-gap: 20px; /* Firefox */
    column-count: 1; column-gap: 20px;
    width: 198px;
    font-size: 15px;
    text-align: justify;
}

.singleColumns:first-child:first-letter {
    float: left; font-size: 67px; margin:  7px 5px -10px 20px;
}

.imageSpanning3Columns{     /* align to top-right */
    width:640px;
    top: 0 px;
    float:right;
}

.border{
    border: solid 0px;
    margin: 0px;
}

Вот скрипка с примером: http://jsfiddle.net/1ye9tyhq/

Ответ 4

Здравствуйте: Пожалуйста, найдите пример моего ответа ЗДЕСЬ

КОД HTML

<div id="news_paper">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
    </p>
    <img id="news_paper_image" src="http://lorempixel.com/600/275/">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>   
</div>

КОД CSS

#news_paper{
  margin: 7rem auto;
  width: 70%;
}

#news_paper > p{
  width: 22%;
  float: left;
  padding: 1%;
  text-align: justify;
}

#news_paper > p:first-child{
  margin-top: -1rem;
}

p{
  font-family:sans-serif;
}
#news_paper > p:first-child::first-letter{
  font-size: 2.5rem;
  color: whitesmoke;
  float: left;
  margin-top: -0.25rem;
  padding: 0 0.25rem 0.25rem;
  background-color: tomato;
}

#news_paper_image{
  width: 70%;
  float: left;
  margin-left: 1%;
}

СПАСИБО T04435