Тег Div в одном ряду

Я столкнулся с проблемой относительно тега css div.Тег Div в одном ряду

Это мой код, который я использую.

#title { 
 
     float: left; 
 
     background-color: #2e3539; 
 
     color: white; 
 
    } 
 
    
 
    .arrow-down { 
 
     float: left; 
 
     width: 0; 
 
     height: 0; 
 
     border-left: 15px solid transparent; 
 
     border-right: 0px solid transparent; 
 
     border-bottom: 15px solid #2e3539; 
 
    
 
    } 
 
    
 
    .arrow-up { 
 
     float: left; 
 
     width: 0; 
 
     height: 0; 
 
     border-left: 0px solid transparent; 
 
     border-right: 15px solid transparent; 
 
     border-top: 15px solid #2e3539; 
 
    
 
    }

<DIV class=arrow-down></DIV> 
 
    <DIV id=title>{Title}</DIV> 
 
    <DIV class=arrow-up></DIV>

И это выходной сигнал

Я пытаюсь сделать все это Div тег в одной строке, так что изображение должно, как показано ниже: -

Ребята, пожалуйста, помогите, я не понимаю, что я делаю неправильно здесь.

ребята, я попробовал некоторые предложения, но имел ту же проблему, поэтому я добавляю полный код здесь. Пожалуйста, смотрите.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML><HEAD> 
<META content="text/html; charset=unicode" http-equiv=Content-Type> 
<META name=GENERATOR content="MSHTML 11.00.9600.18427"></HEAD> 
<BODY> 
<H1>{First name} {Last name}</H1> 
<DIV class=arrow-down></DIV> 
<DIV id=title>{Title}</DIV> 
<DIV class=arrow-up></DIV><BR> 
<DIV id=phone> 
<P style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><SPAN><BR>off:</SPAN> {mobile no} | <SPAN>mob:</SPAN> {office number}</P><BR></DIV> 
<DIV id=address><SPAN>company</SPAN><BR> {address} 
<BR>{country}<BR><BR></DIV> 
<STYLE> 
@import url('http://fonts.googleapis.com/css?family=Lato:400,700'); 

body { 
    font-size:12px; 
    color: black; 
    font-family: 'Lato', sans-serif; 
} 

h1 { 
    color: #77bc1f; 
    margin: auto; 
    padding-left: 14px; 
    font-size: 17px; 
} 

span { 
    color: #77bc1f; 
    font-weight: bold; 

} 

#title { 
    float: left; 
    background-color: #2e3539; 
    color: white; 
} 
.arrow-down { 
    float: left; 
    width: 5px; 
    height: 0px; 
    border-left: 15px solid transparent; 
    border-right: 0px solid transparent; 
    border-bottom: 21px solid #2e3539; 
} 
.arrow-up { 
    float: left; 
    width: 5px; 
    height: 0; 
    border-left: 0px solid transparent; 
    border-right: 15px solid transparent; 
    border-top: 21px solid #2e3539; 
} 
</STYLE> 
</BODY>

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

источник

2016-12-12 kunal

https://jsfiddle.net/ozu6ru29/ кажется просто отлично – haim770

Добавить дополнительный div, который должен содержать ribbon и использовать display: inline-block. Я надеюсь, что это то, что вам нужно:

UPDATE:

Вы также должны установить высоту строки на #title же, как .arrow-down «s border-bottom и .arrow-up» s border-topширина.

@import url('http://fonts.googleapis.com/css?family=Lato:400,700'); 
 
body { 
 
    font-size:12px; 
 
    color: black; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
h1 { 
 
    color: #77bc1f; 
 
    margin: auto; 
 
    padding-left: 14px; 
 
    font-size: 17px; 
 
} 
 

 
span { 
 
    color: #77bc1f; 
 
    font-weight: bold; 
 

 
} 
 

 
.container{ 
 
    font-size: 0; 
 
} 
 
#title { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-color: #2e3539; 
 
    color: white; 
 
    font-size: 12px; 
 
    line-height: 15px; 
 
} 
 
.arrow-down { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 5px; 
 
    height: 0px; 
 
    border-left: 15px solid transparent; 
 
    border-right: 0px solid transparent; 
 
    border-bottom: 15px solid #2e3539; 
 
} 
 
.arrow-up { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 5px; 
 
    height: 0; 
 
    border-left: 0px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #2e3539; 
 
}

<div class='container'> 
 
    <div class='arrow-down'></div> 
 
    <div id='title'>{Title}</div> 
 
    <div class='arrow-up'></div> 
 
</div>

источник

2016-12-12 13:20:04 Ionut

Пожалуйста, проверьте снова вопрос – kunal

@kunal, проверьте мой обновленный ответ. Это должно делать свое дело. – Ionut

Просто избегать использования float: left и использовать display: inline-block вместо:

.arrow-down { 
    display: inline-block; //added this line 
    float: left; 
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent; 
    border-right: 0px solid transparent; 
    border-bottom: 15px solid #2e3539; 

} 

#title { 
    /*float: left;*/ //remove 
    display: inline-block; 
    background-color: #2e3539; 
    color: white; 
}

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

источник

2016-12-12 13:20:27 K48

Adjust вы граничите ширину, взглянуть на фрагмент код ниже (тот же кода, который вы публикуемый):

<HTML><HEAD> 
 
<META content="text/html; charset=unicode" http-equiv=Content-Type> 
 
<META name=GENERATOR content="MSHTML 11.00.9600.18427"></HEAD> 
 
<BODY> 
 
<H1>{First name} {Last name}</H1> 
 
<DIV class=arrow-down></DIV> 
 
<DIV id=title>{Title}</DIV> 
 
<DIV class=arrow-up></DIV><BR> 
 
<DIV id=phone> 
 
<P style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><SPAN><BR>off:</SPAN> {mobile no} | <SPAN>mob:</SPAN> {office number}</P><BR></DIV> 
 
<DIV id=address><SPAN>company</SPAN><BR> {address} 
 
<BR>{country}<BR><BR></DIV> 
 
<STYLE> 
 
@import url('http://fonts.googleapis.com/css?family=Lato:400,700'); 
 

 
body { 
 
    font-size:12px; 
 
    color: black; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
h1 { 
 
    color: #77bc1f; 
 
    margin: auto; 
 
    padding-left: 14px; 
 
    font-size: 17px; 
 
} 
 

 
span { 
 
    color: #77bc1f; 
 
    font-weight: bold; 
 

 
} 
 

 
#title { 
 
    float: left; 
 
    background-color: #2e3539; 
 
    color: white; 
 
} 
 
.arrow-down { 
 
    float: left; 
 
    width: 5px; 
 
    height: 0px; 
 
    border-left: 15px solid transparent; 
 
    border-right: 0px solid transparent; 
 
    border-bottom: 15px solid #2e3539; 
 
} 
 
.arrow-up { 
 
    float: left; 
 
    width: 5px; 
 
    height: 0; 
 
    border-left: 0px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #2e3539; 
 
} 
 
</STYLE> 
 
</BODY></HTML>

Надеется, что это помогает!

источник

2016-12-12 13:23:04

Я didnt wok, поэтому я загрузил полный код страницы, пожалуйста, проверьте вопрос – kunal

@kunal Посмотрите на мой обновленный ответ. –

просто изменить границу как стрелки, от 21px до 18px, это sould сделать трюк

#title { 
 
     float: left; 
 
     background-color: #2e3539; 
 
     color: white; 
 
    } 
 

 
    .arrow-down { 
 
     float: left; 
 
     width: 5px; 
 
     border-left: 15px solid transparent; 
 
     border-right: 0px solid transparent; 
 
     border-bottom: 18px solid #2e3539; 
 
    } 
 

 
    .arrow-up { 
 
     float: left; 
 
     width: 5px; 
 
     border-left: 0px solid transparent; 
 
     border-right: 15px solid transparent; 
 
     border-top: 18px solid #2e3539; 
 
    }

<div class=arrow-down></div> 
 
    <div id=title>{Title}</div> 
 
    <div class=arrow-up></div><BR>

источник

2016-12-12 13:26:56

Убедитесь, что line-height соответствует border-top и border-bottom из двух треугольников, так что треугольники одинаково высоки, как элемент #title. Если три элемента не одинаково высоки, их невозможно будет правильно выровнять.

Это решение использует ::before и ::after внутри inline-block элемента, вместо трех последовательных float-х гг.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
</head> 

<body> 

<style type="text/css"> 
@import url('http://fonts.googleapis.com/css?family=Lato:400,700'); 

body { 
    font-size:12px; 
    color: black; 
    font-family: 'Lato', sans-serif; 
} 

h1 { 
    color: #77bc1f; 
    margin: auto; 
    padding-left: 14px; 
    font-size: 17px; 
} 

span { 
    color: #77bc1f; 
    font-weight: bold; 
} 

#title { 
    display:inline-block; 
    color: white; 
    position: relative; 
    background: #2e3539; 
    margin:0 21px; 
    padding:0 3px; 
    line-height:15px; 
} 

#title::before, 
#title::after { 
    content:""; 
    display:block; 
    position:absolute; 
    top:0; 
    width:0; 
    height:0; 
} 

#title::after { 
    right:-21px; 
    border-left: 21px solid #2e3539; 
    border-right: 0px solid transparent; 
    border-bottom: 15px solid transparent; 
} 

#title::before { 
    left:-21px; 
    border-left: 0px solid transparent; 
    border-right: 21px solid #2e3539; 
    border-top: 15px solid transparent; 
} 

#phone { 
    font-size: 10pt; 
    font-family: Arial, sans-serif; 
} 

</style> 

<h1>{First name} {Last name}</h1> 
<div id="title">{Title}</div> 
<div id="phone"> 
    <span>off:</span> {mobile no} | <SPAN>mob:</SPAN> {office number} 
</div> 
<div id=address> 
    <span>company</span><br> 
    {address}<br> 
    {country}<br><br> 
</div> 

</body> 
</html>

источник

2016-12-12 13:37:37 mch

Проблема все еще существует. Пожалуйста, проверьте полный код, который я обновил. – kunal

OK Я просто добавил весь документ, посмотрим, поможет ли он. – mch

'Подпись (в формате HTML) содержит тег