Как исправить div в середине трехколоночного макета?

Я использую многоколоночную компоновку CSS3, но мне трудно найти способ горизонтально центрировать div таким образом, чтобы текст обертывался вокруг него. Любая помощь была бы потрясающей, спасибо!Как исправить div в середине трехколоночного макета?

Here's an idea of what I'm trying to do.

источник

2016-11-17 Corbin

не могли бы вы разместить какой-либо код, пожалуйста, –

Как далеко у вас есть? Добавление кода поможет увидеть, что вы пробовали. Существует линия между «помогать» и делать все это для вас. Приветствия. –

Вы сказали: «... этот текст обернут вокруг него», но ваш образец изображения не содержит текста, пожалуйста, обновите, чтобы мы получили более четкое представление о том, что вы пытаетесь сделать – evilReiko

Я не совсем уверен, что вы хотите, но, возможно, это поможет вам? вот fiddle

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.newspaper { 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; /* Firefox */ 
    column-count: 3; 
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ 
    -moz-column-gap: 40px; /* Firefox */ 
    column-gap: 40px; 
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ 
    -moz-column-rule-style: solid; /* Firefox */ 
    column-rule-style: solid; 
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ 
    -moz-column-rule-width: 1px; /* Firefox */ 
    column-rule-width: 1px; 
} 
.yourPic{ 
    border:3px solid black; 
    height:60px; 
    margin-top:50%; 
} 
</style> 
</head> 
<body> 


<p><b>Note:</b>Internet Explorer 9, and earlier versions, does not support the column-rule-width property.</p> 
     <div class="newspaper"> 
     Lorem ipsum 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, quis nostrud exerci tation ullamcorper suscipit lobortis 
     nisl ut aliquip ex ea commodo consequat. 
     <div class="yourPic"> 
      picture 
     </div> 
     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. 
     </div> 

     </body> 
     </html>

EDIT Другая возможность accpomplish что с таблицами. (Я предпочитаю это решение) У вас есть пример в fiddle

источник

2016-11-17 20:04:41 theoretisch

Как исправить div в середине трехколоночного макета?

ответ

Смежные вопросы