установить три заголовка div 25% 50% 25% по горизонтали

Я хочу установить три заголовка div 25% 50% 25% Горизонтально, показано в image, положили их три div в заголовке div с соответствующим css, но div размещены вертикально показано here.установить три заголовка div 25% 50% 25% по горизонтали

Проверено с помощью предыдущих ответов, которые я не мог получить, дайте мне направление, пожалуйста! Благодаря

HTML код:

<div id="header"> 
    <div id="header-left" class="div-border"> 
    <h6 align="center">Image holder</h6> 
    </div> 
    <div id="header-middle" class="div-border"> 
    <h1 align="center">Dashboard</h1> 
    </div> 
    <div id="header-right" class="div-border"> 
    <h6> 
    <span > 
    <span style="line-height: 24px;" id="border-around"> 
    <b>Profile | Help | Admin </b> 
    </span> 
    </span> 
    </h6> 
    </div> 
    </div>

код CSS:

#header { 
     background-color:#fecb00; 
     color:white; 
     text-align:center; 
     padding:5px; 
    } 
    #header-left { 
     width: 25%; 
    } 
    #header-middle { 
     width: 50%; 
    } 
    #header-right { 
     width: 25%; 
    } 
    .div-border { 
     border: 2px solid silver; 
    } 
    #border-around { 
     border: 1px solid #000; 
    }

источник

2014-10-17 Java.beginner

Вы должны установить box-sizing: border-box включить границы для ширины расчета, установите display: inline-box для отображения элементов рядный, vertical-align: middle и устранить белый интервал между дивы.

.div-border { 
    box-sizing: border-box; 
    display: inline-block; 
    vertical-align: middle; 
}

Fiddle: http://jsfiddle.net/khbv2mac/1/

источник

2014-10-17 10:33:39 emmanuel

Благодаря @emmanuel, это то, что я после .... –

Вас! – emmanuel

Ваши элементы отображаются в виде block элементов по умолчанию, что означает, что они будут принимать всю «линию» для себя, если не плавали. Вы можете либо поплавать вашими элементами, либо отображать их inline-block.
Скопированная ширина ваших трех элементов шире, чем 100% ширины страницы, поскольку их границы не включены в указанную вами ширину. Вы можете исправить это, изменив box-sizing.

Примечание: Я прокомментировал пустое пространство между вашими inline-block элементами. Поскольку они отображаются в строке, пространство между ними будет подтверждено.

body{margin:0} 
 
#header { 
 
    background-color:#fecb00; 
 
    color:white; 
 
    text-align:center; 
 
} 
 
#header-left { 
 
    width: 25%; 
 
} 
 
#header-middle { 
 
    width: 50%; 
 
} 
 
#header-right { 
 
    width: 25%; 
 
} 
 
.div-border { 
 
    /* Style changes here */ 
 
    display:inline-block; 
 
    box-sizing:border-box; 
 
    border: 2px solid silver; 
 
} 
 
#border-around { 
 
    border: 1px solid #000; 
 
}

<div id="header"> 
 
    <div id="header-left" class="div-border"> 
 
     <h6 align="center">Image holder</h6> 
 
    </div><!-- 
 
--><div id="header-middle" class="div-border"> 
 
     <h1 align="center">Dashboard</h1> 
 
    </div><!-- 
 
--><div id="header-right" class="div-border"> 
 
     <h6><span><span style="line-height: 24px;" id="border-around"><b>Profile | Help | Admin </b></span></span></h6> 
 
    </div> 
 
</div>

JSFiddle

источник

2014-10-17 10:34:09 George

Спасибо @George, –

используется для плавающего элемента, как этот

*{ // add this line 
    box-sizing:border-box; // add this line 
} // add this line 
#header { 
    background-color:#fecb00; 
    color:white; 
    text-align:center; 
    padding:5px; 
    overflow:hidden; // add this line 
} 
#header-left { 
    width: 25%; 
    float:left; // add this line 
} 
#header-middle { 
    width: 50%; 
    float:left; // add this line 
} 
#header-right { 
    width: 25%; 
    float:left; // add this line 
} 
.div-border { 
    border: 2px solid silver; 
}

Demo

источник

2014-10-17 10:37:02

Спасибо @Rohit Azad, –

вы можете попробовать это, используя свойство css order.

код:

<html> 
<head> 
<style> 
#header { 
     background-color:#fecb00; 
     color:white; 
     text-align:center; 
     padding:5px; 
     width:100%; 
     display: -webkit-flex; /* Safari */ 
    display: flex; 
    } 
    #header-left { 
     width: 25%; 
     -webkit-order:1; 
     order:1; 
    } 
    #header-middle { 
     width: 49%; 
     -webkit-order:2; 
     order:2; 
    } 
    #header-right { 
     width: 25%; 
     -webkit-order:3; 
     order:3; 
    } 
    .div-border { 
     border: 2px solid silver; 
    } 
    #border-around { 
     border: 1px solid #000; 
    } 
</style> 
</head> 
<body> 
    <div id="header"> 
    <div id="header-left" class="div-border"> 
    <h6 align="center">Image holder</h6> 
    </div> 
    <div id="header-middle" class="div-border"> 
    <h1 align="center">Dashboard</h1> 
    </div> 
    <div id="header-right" class="div-border"> 
    <h6> 
    <span > 
    <span style="line-height: 24px;" id="border-around"> 
    <b>Profile | Help | Admin </b> 
    </span> 
    </span> 
    </h6> 
    </div> 
    </div> 
</body> 
</html>

скрипку: http://jsfiddle.net/invincibleJai/sbuveeLw/

источник

2014-10-17 10:46:00 invinciblejai

Спасибо @jai, за указания ... –

Любая конкретная причина для этой «ширины: 49%;»? Спасибо @jai –

ничего, кроме того, что-то просто сохранил некоторый процент за маржу, заполнение, границу ... я обычно делаю, но не нужен. – invinciblejai

установить три заголовка div 25% 50% 25% по горизонтали

ответ

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