CSS: нужны боксы на 62% и 38%, но не могут найти правильную формулу или код

Попытка получить левый бокс на уровне 62% от ширины влево и в правом поле на 38%. Где бы я ни добавлял проценты, они все еще сидят на 50%. Есть идеи? Благодарим вас за любую помощь/советы, которыми вы можете поделиться.CSS: нужны боксы на 62% и 38%, но не могут найти правильную формулу или код

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#sides { 
    display: flex; 
    padding: 0px 0px; 
    background-color: white; 
} 

.sideleft { 
    flex: 1;  
    padding: 20px; 
    margin: 0; 
} 

.sideright { 
    flex: 1;  
    padding: 20px; 
    margin: 0; 
} 

#left { 
    background-color: #333333; 
} 

#right { 
    background-color: #018DCA; 
} 

h1 { 
    color: #FFFFFF; 
} 

h2 { 
    color: #FFFFFF; 
} 

</style> 
</head> 
<body> 

<div id="sides"> 
    <div class="sideleft" id="left" align="right"> 
    <h1>text</h1> 
    <h2>text</h2> 
    </div> 
    <div class="sideright" id="right"> 
    <h1>text</h1> 
    <h2>text</h2> 
    </div> 
</div> 

</body> 
</html>

источник

2015-06-13 DrewK

вы имеете в виду, как этот http://jsfiddle.net/maio/ue8wgnkx/ – maioman

Вы просто должны сделать левую и правую сторону, плывут налево и иметь дисплей: встроенный блок здесь является CSS с ним работать. Вы также должны установить контейнер DIV в этом случае стороны 100%

#sides { 
    display: flex; 
    width: 100%; 
    background-color: white; 
    margin: 0px; 
} 

.sideleft { 
    flex: 1; 
    width: 62%; 
    margin: 0px; 
    display: inline-block; 
    float: left; 
} 

.sideright { 
    flex: 1;  
    width: 38%; 
    margin: 0px; 
    display: inline-block; 
    float: left; 
}

источник

2015-06-13 16:55:40

flex property является сочетание flex-grow: flex-shrink: flex-basis:,

так, чтобы установить ширину вам нужно установить flex-basis:

для экс .: flex: 0 1 38%;

fiddle

источник

2015-06-13 17:00:33 maioman

удивительным! Благодаря! – DrewK

Попробуйте пожалуйста:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#sides { 

    padding: 0px 0px; 
    background-color: white; 
} 

.sideleft { 
    flex: 1;  
    padding: 00px; 
    margin: 0; 
} 

.sideright { 
    flex: 1;  
    padding: 00px; 


} 

#left { 
    background-color: #333333; 
} 

#right { 
    background-color: #018DCA; 
} 

h1 { 
    color: #FFFFFF; 
} 

h2 { 
    color: #FFFFFF; 
} 

</style> 
</head> 
<body> 

<div id="sides"> 
    <div class="sideleft" id="left" style=" width:62%"> 
    <h1>text</h1> 
    <h2>text</h2> 
    </div> 
    <div class="sideright" id="right" style=" width:38%; margin-left:62%"> 
    <h1>text</h1> 
    <h2>text</h2> 
    </div> 
</div> 

</body> 
</html>

CSS ширина коробки

источник

2015-06-13 17:47:37

CSS: нужны боксы на 62% и 38%, но не могут найти правильную формулу или код

ответ

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