Блог

Главная - Вопросы по программированию - Как выровнять два встроенных блока текста по горизонтали?

Как выровнять два встроенных блока текста по горизонтали?

#html #css

#HTML #css

Вопрос:

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

 <div id="wrapper">
<aside></aside>
<section></section>
</div>

#wrapper{
  width: 100%;
  padding: 10px;
}

section {
  display: inline-block;
  width: 70%;
  height: 400px;
}

aside {
  display: inline-block;
  width: 25%;
  height: 400px; 
}

Спасибо!

Комментарии:

1. Укажите float:left в сторону и float:right в раздел.

Ответ №1:

Вы пробовали опцию выравнивания по вертикали?

 aside {
  display: inline-block;
  width: 25%;
  height: 400px; 
  vertical-align: top;
}

Ответ №2:

Я бы не стал использовать inline-block для сложных элементов, в которых много дочерних элементов .. если вы хотите создать столбчатый макет, используйте floats или flexbox.

 #wrapper{
  width: 100%;
  padding: 10px;
}

section {
  float: left;
  width: 70%;
  height: 400px;
}

aside {
  float: left;
  width: 25%;
  height: 400px; 
}  
 <div id="wrapper">
      <aside>
   
        <h2>Sidebar</h2>
          
        <ol>
          <li>first item</li>
          <li>second item</li>
          <li>third item</li>
        </ol>
        
      </aside>
      
      <section>
      
        
          <h2>
             Article Title
          </h2>
       
        <p>
          Bacon ipsum dolor amet flank pork loin ham pork chop chicken t-bone swine frankfurter beef ribs ham hock. Sirloin venison flank, pork belly doner andouille turducken. Chuck corned beef ham swine ball tip, beef capicola short ribs meatloaf frankfurter.
          Capicola tongue boudin pork loin turducken shoulder tri-tip. Biltong corned beef ball tip hamburger turducken, chuck picanha kevin prosciutto. Venison cupim strip steak, biltong hamburger meatball boudin salami ground round jowl brisket tenderloin
          short ribs. Meatball tri-tip short loin shankle capicola, doner prosciutto ball tip pork belly filet mignon ham pig pancetta beef cupim. Shankle tail jerky burgdoggen rump venison. Ham hock sausage brisket kevin. Pork belly ground round ham,
          flank boudin short ribs pig tongue shankle salami pancetta chicken beef ribs. Jerky alcatra porchetta, venison prosciutto frankfurter cow chicken burgdoggen swine sausage kielbasa. Does your lorem ipsum text long for something a little meatier?
          Give our generator a try… it’s tasty!
        </p>
        
      </section>

    </div>

Ответ №3:

в зависимости от требований к поддержке вашего браузера вы можете использовать flexbox

 #wrapper{
  width: 100%;
  height: 400px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

https://jsfiddle.net/8bbo2cg7/