2016-02-20 2 views
-3

Во время разработки страницы я сталкиваюсь с конфликтом (я думаю) в div, который содержит группу div. Как это выглядит в настоящее время http://castellvmaqvae.nl/exposities/ img - как это должно выглядеть. enter image description hereКонфликт CSS во фонах и границах

+0

Добро пожаловать в переполнение стека! Вопросы, требующие помощи кода, должны содержать кратчайший код, необходимый для его воспроизведения ** в самом вопросе **. Хотя вы указали ссылку на пример, если ссылка стала недействительной, ваш вопрос не будет иметь значения для других будущих пользователей SO с той же проблемой. –

ответ

0

Измените следующие, ваш DIV внутри основного DIV шире, чем они должны быть, что в вашем случае, если вы хотите, чтобы они ту же ширину, что и изображение, вот обновленный CSS:

.col-md-4 third { 
    width:25%; //You may want to play around with this on different screen sizes 
} 

ИЛИ равноширокий:

.col-md-4 third { 
    width:200px; // Same width as the picture 
} 
+0

В будущем это хорошая идея опубликовать соответствующий код, так как @Paulie_D упоминает о проблеме –

0

Просто сделайте это изменение:

`col-md-2` --> `col-md-1` 

    `col-md-6` --> `col-md-7 second` 

    `col-md-4 third` --> `col-md-3 third` 

Также в существующем добавить text-align: center; в col-md-3 third.

Надеюсь, это то, что вы хотите.

+0

Спасибо, ребята: Я работал над оберткой, чтобы она вписывалась в 3-й столбец и имела белый фон и границу: .verwikkeld { \t ширина: 200px; высота: авто; background-color: #FFF; border: # 999 1px solid; margin-left: 20px; margin-right: 30px; } Возможно, это вариант в некотором роде, основное внимание уделяется позиционированию и фону. –

0

Как-то цвет фона оберток не имеет эффекта, но цвет фона для отдельных div и границ, похоже, отлично работает. код:

.verwikkeld {width:316px; 
height:auto; 
background-color: #FFF; 
border:#999 1px solid; 
margin-left:20px; 
margin-right:30px; 
} 
.verwacht{color:#666; 
border-left:#000 1px solid; 
border-right:#000 1px solid; 
border-top:#000 1px solid; 
width:220px; 
background-color:#FFF; 
text-align:center; 
font-family:Arial, Helvetica, sans-serif; 
padding-top:10px; 
padding-bottom:10px; 
font-size:32px; 
} 
.verwacht_img{border-left:#000 1px solid; 
border-right:#000 1px solid; 
background-color:#FFF; 
width:220px; 
} 
.verwacht_naam{color:#666; 
border-left:#000 1px solid; 
border-right:#000 1px solid; 
background-color:#FFF; 
width:220px; 
font-family:Arial, Helvetica, sans-serif; 
padding-left:10px; 
padding-top:10px; 
font-size:28px; 
} 
.verwacht_titel{color:#000; 
border-left:#000 1px solid; 
border-right:#000 1px solid; 
background-color:#FFF; 
width:220px; 
font-family:Arial, Helvetica, sans-serif; 
padding-left:10px; 
padding-top:10px; 
font-size:16px; 
} 
.verwacht_datum{color:#F90; 
border-left:#000 1px solid; 
border-right:#000 1px solid; 
background-color:#FFF; 
width:220px; 
font-family:Arial, Helvetica, sans-serif; 
padding-left:10px; 
padding-top:10px; 
font-size:12px; 
} 
.verwacht_text{color:#000; 
border-left:#000 1px solid; 
border-right:#000 1px solid;; 
border-bottom:#000 1px solid; 
background-color:#FFF; 
width:220px; 
font-family:Arial, Helvetica, sans-serif; 
padding-left:10px; 
padding-top:10px; 
padding-bottom:20px; 
font-size:12px; 
} 

Спасибо ребята за ваше время.

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