Боковая панель (с плавающей точкой: слева) не всегда с плавающей левой

0

В настоящее время я создаю контейнер для хранения боковых панелей и содержимого, но когда я добавляю больше текста на боковую панель, чем в контейнер, вторая боковая панель немного плавает в сторону. Это код, который я использую.

HTML:

<div class="container">
    <div class="sidebar">
        Placeholder
        <br><hr>
        Test
    </div>
    <div class="content">Placeholder</div>
    <br>
    <div class="sidebar">Placeholder</div>
</div>

CSS

.sidebar {
  width: 222px;
  height: auto;
  background-color: #E9E9E9;
  border-radius: 5px;
  border: 1px solid #7F7F7F;
  box-shadow: inset 0px 1px 0px #FDFDFD;
  box-shadow: 0px 1px 0px #949494;
  margin-right: 20px;
  padding: 5px;
  float: left;
  text-align: left;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
}
.content {
  width: 666px;
  height: auto;
  background-color: #E9E9E9;
  border-radius: 5px;
  border: 1px solid #7F7F7F;
  box-shadow: inset 0px 1px 0px #FDFDFD;
  box-shadow: 0px 1px 0px #949494;
  padding: 5px;
  float: right;
  text-align: left;
  display: inline-block;
  margin: auto;
  margin-top: 10px;
}
.container {
  width: 932px;
  text-align: center;
  margin: auto;
}
  • 0
    Я не обращаюсь к этому вопросу, но замечаю, что у вас есть две декларации box-shadow в .content и .sidebar . Если вы хотите просто использовать последний box-shadow , тогда это нормально, но если вы пытаетесь использовать оба, тогда используйте это вместо этого. box-shadow: inset 0px 1px 0px #FDFDFD, 0px 1px 0px #949494;
  • 0
    почему две боковые панели?
Показать ещё 1 комментарий
Теги:

3 ответа

0
Лучший ответ

Вы используете две боковые панели с тем же классом. поставьте.clear {clear: both} в свой файл css и используйте jsut перед закрывающей панелью боковой панели. Если вам действительно нужны две боковые панели, вам нужно создать для нее другое правило. sidebar1, sidebar2 с разными поплавками. Измените встроенный блок для блокировки.

Поделиться
  • 0
    Работал вроде как я имел в виду, лучший ответ, хотя. Спасибо; D
  • 0
    Рад помочь. Спасибо! ура
0

Обновить класс.sidebar

.sidebar {
    background-color: #E9E9E9;
    border: 1px solid #7F7F7F;
    border-radius: 5px;
    box-shadow: 0 1px 0 #949494;
    font-weight: bold;
    height: auto;
    margin-right: 20px;
    margin-top: 10px;
    overflow: hidden;
    padding: 5px;
    text-align: left;
    width: 222px;
}
Поделиться
0

Если я понимаю вопрос: HTML

   <div class="container">
        <div class="sidebar">
            Placeholder
            <br><hr>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
        </div>
        <div class="content">Placeholder</div>
        <br>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto eligendi maxime autem debitis eum consectetur odit at exercitationem velit earum sunt nobis laborum. Dignissimos vero accusantium velit rerum voluptatibus?</div>
    </div>

CSS

.sidebar {
width: 222px;
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
margin-right: 20px;
padding: 5px;
float: left;
text-align: left;
font-weight: bold;
display: inline-block;
margin-top: 10px;
}
.content {
width: 666px;
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
padding: 5px;
float: right;
text-align: left;
display: inline-block;
margin: auto;
margin-top: 10px;
}
.container {
width: 932px;
text-align: center;
margin: auto;
}

DEMO

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню