Как получить два divs, чтобы придерживаться друг друга?

я следующий блок CSS/HTML:Как получить два divs, чтобы придерживаться друг друга?

<html> 
    <head> 
     <title>{CODE} Pink</title> 
     <style> 
      .leftLogo { 
       float: left; 
       border: black solid; 
       background-color: black; 
       color: white; 
       font-family: Courier, Courier New; 
      } 


      .rightLogo { 
       float: right; 
       border: black dashed; 
       background: pink; 
       color: black; 
      } 
      .logo 
      { 
       height: 50px; 
       line-height: 50px; 
       width: 200px; 

       text-align: center; 
       vertical-align: middle; 
       font-size: 3em; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="leftlogo logo">{CODE}</div> 
     <div class="rightlogo logo">PINK</div> 
    </body> 
</html>

Что это в настоящее время делает это:

То, что я хотел бы это сделать, это:

Я знаю, что могу делать это с позициями, но что это лучший способ сделать это o оба будут оставаться рядом друг с другом в самых разных сценариях?

источник

2015-08-12 Codingo

Изменить код для .rightlogoclass, чтобы отразить это:

.rightLogo { 
    float: left; 
}

вместо того, что в настоящий момент:

.rightLogo { 
    float: right; 
}

Примечание: Кроме того, следует помнить о вашей капитализации классов , Я заметил, что в вашем CSS вы используете .leftLogo, но в вашем HTML вы используете .leftlogo. Я не уверен, насколько глубоки требования к браузеру для того, чтобы быть такими строгими, но я бы не пропустил мимо IE, чтобы что-то испортить.

Результат:

.leftLogo { 
 
    float: left; 
 
    border: black solid; 
 
    background-color: black; 
 
    color: white; 
 
    font-family: Courier, Courier New; 
 
} 
 

 

 
.rightLogo { 
 
    float: left; 
 
    border: black dashed; 
 
    background: pink; 
 
    color: black; 
 
} 
 

 
.logo 
 
{ 
 
    height: 50px; 
 
    line-height: 50px; 
 
    width: 200px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 3em; 
 
}

<div class="leftLogo logo">{CODE}</div> 
 
<div class="rightLogo logo">PINK</div>

источник

2015-08-12 23:03:14 RhapX

Спасибо, не поймал этот. Исправляем сейчас! – Codingo

@Codingo Чтобы отобразить фрагмент, просто нажмите значок справа от значка вставки изображения в редакторе WYSIWYG или нажмите CTRL + M. Появится всплывающее окно, напоминающее JSFiddle. (Я видел ваш вопрос до того, как вы его удалили -_-) – RhapX

Спасибо :) В конце концов я понял, что редактировал ваш вопрос, но, конечно, не знал о ctrl + M. Очень признателен! – Codingo

Вы можете использовать float:left для правой DIV, и размер ширины с запросами средств массовой информации для разрешения, где второй ДИВ идти вниз.

источник

2015-08-12 23:04:13 LTasty

Это ответ, но похоже, что RhapX победил вас! – Codingo

Вы можете легко сделать это, добавив float: left; к вашему .logo класса и удалению поплавка свойства внутри .leftLogo & .rightLogo

источник

2015-08-12 23:09:33 Hatora

Я думаю, что лучший подход к этому вопросу, чтобы установить два логотипа (div) внутри контейнера, чтобы иметь абсолютное положение, чтобы они перекрывались, а затем тот, который вы хотите в правой части, дает ему право на 100%.

html code 
<div class="container"> 
    <div class="leftLogo logo">{CODE}</div> 
    <div class="rightLogo logo">PINK</div> 
</div> 

css Code 
.container{ 
    position: absolute;   
} 
.rightLogo { 
    right: 100%; 
}

Я только поместил код, который необходимо добавить к тому, что у вас есть. Good Luck

Надеюсь, что это ответ на ваш вопрос T04435 ...

PS: дивы в исходном посте есть промаха заклинание в названиях КЛАССА л должен быть капитал L leftlogo ---> leftLogo и тот же для правого

источник

2015-08-12 23:44:02 T04435

Оценка! И я соглашаюсь, сделав это сейчас. – Codingo

Как получить два divs, чтобы придерживаться друг друга?

ответ

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