Question

When I minimize the browser window to the left the sidebar text goes down. When I minimize it to the right the article text goes down. Is it possible to align them on the top? Here is the 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; 
}

Thank you!

Answer 1

Have you tried vertical-align option?

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

Answer 2

I wouldn't use inline-block for complex elements that have many child elements in them.. if you want to make a columnar layout, either use floats, or 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>

Answer 3

depending on your browser support requirement, you can use flexbox

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

https://jsfiddle.net/8bbo2cg7/

How do I align two inline blocks of text horizontally?

3 个答案: