ставить стилизованные divs рядом друг с другом

Im делает веб-сайт в данный момент, но я хочу иметь 4 цирка в нем, которые стоят рядом друг с другом, с запасом примерно в 50px между ними. я могу получить один из кругов в правильном положении, но когда я хочу сделать больше из них, он не покажет круг.ставить стилизованные divs рядом друг с другом

Мой КСС:

.webdesign-circle { 
    height: 200px; 
    width: 200px; 
    background: #0EB1E8; 
    border-radius: 50%; 
    margin: 50px 0px 0px 70px; 
    float: left; 
} 

.onderhoud-cirlce { 
    height: 200px; 
    width: 200px; 
    background: #0EB1E8; 
    border-radius: 50%; 
    margin: 70px 0px 0px 150px; 
    float: left; 
}

заранее спасибо

источник

2015-01-03 DlBreda

Я думаю, что вы имели только 'cirlce' опечатка :) – sodawillow

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <style type="text/css"> 
 
    .wrapper { 
 
     width: 600px; 
 
     margin: 0 auto; 
 
    } 
 
    .circle { 
 
     height: 100px; 
 
     width: 100px; 
 
     border-radius: 100%; 
 
     margin: 25px; 
 
     background: #213; 
 
     display: inline-block; 
 
    } 
 
    .circle:first-child { 
 
     margin-left: 0px; 
 
    } 
 
    .circle:last-child: { 
 
     margin-right: 0px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div class="circle one"></div> 
 
    <div class="circle two"></div> 
 
    <div class="circle three"></div> 
 
    <div class="circle four"></div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-01-03 14:39:30 illusionist

Большое вам спасибо! – DlBreda

Является ли это то, что вы это означает? Вы можете использовать margin-lefthttp://jsfiddle.net/wzv4gmft/7/

источник

2015-01-03 13:23:20 verrucktfuchs

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

Какие элементы HTML вы используете? div? span? Другие ? + у вас есть опечатка, и я скопировал его в своем примере lol '.onderhoud-cirlce' – sodawillow

Возможно, вы имели в виду что-то вроде этого

HTML:

<div class="circle one"></div> 
<div class="circle two"></div> 
<div class="circle three"></div> 
<div class="circle four"></div>

CSS

.circle { 
height: 200px; 
width: 200px; 
border-radius: 100%; 
display: inline-block; 
margin-left: 50px; 
} 

.one { 
background: #e6e6e6 
} 

.two { 
background: #e6e6e6 
} 

.three { 
background: #e6e6e6 
} 

.four { 
background: #e6e6e6 
}

Вы можете изменить цвет фона каждого круга через разные divs (один, два, три, четыре и пять)

источник

2015-01-03 13:25:39

эй большое спасибо, но его не очень то, что им нужно, я хочу, чтобы несколько кругов рядом друг с другом с разницей как 50 px между ним. – DlBreda

Моя попытка :)

Edit: у вас есть опечатка, и я скопировал его в моем примере лол .onderhoud-cirlce

Fiddle: http://jsfiddle.net/14f0vunh/

HTML

<div class="webdesign-circle"></div> 
<div class="onderhoud-circle"></div> 
<div class="test-circle"></div>

CSS

[class*=circle] 
{ 
    display: inline-block; 
    height: 200px; 
    width: 200px; 
    border-radius: 50%; 
} 

[class*=circle] + [class*=circle] 
{ 
    margin-left: 50px; 
} 

.webdesign-circle { 
    background-color: blue; 
} 

.onderhoud-circle { 
    background-color: red; 
} 

.test-circle { 
    background-color: green; 
}

источник

2015-01-03 14:46:11 sodawillow

ставить стилизованные divs рядом друг с другом

ответ

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