CSS定位問題。詳細解釋

我有2個問題，無法修復它們。我試圖做與相同的設計。CSS定位問題。詳細解釋

我無法調整標題中的框，以留在我的標題標籤旁邊。另一個問題是，我無法將所有內容元素放在一行中。一個是上，另一種是與other..I've下5個像素試圖表明與塗料中的問題有我的代碼，我心底很高興，如果有人能幫助我 HTML代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="main.css" type="text/css" /> 
    <title>Newspaper</title> 
</head> 
<body> 
    <header> 
     <hgroup> 
      <h2>THE OLD POST</h2> 
      <h3>ILLUSTRATED WEEKLY NEWSPAPER</h3> 
      <div class="header-Box"> 
       <strong>This is a story about one pig</strong> 
      </div> 
     </hgroup> 
    </header> 

    <div class="infoBorder"> 
     <span>Est.1896</span> 
     <span>Wednesday,November 24,1892</span> 
     <span>Price 6d</span> 
    </div> 

    <div id="main-Content"> 
     <h1>INSERT YOUR HEADLINE</h1> 
     <div class="parent-content"> 
     <div class="content"> 
      <strong>Bacon ipsum dolor amet beef strip steak beef ribs ham, porchetta ground round ham hock turducken prosciutto kevin swine.</strong> 
      <p> 
      Flank turkey venison frankfurter spare ribs drumstick ball tip rump porchetta kielbasa swine pork turducken. Turkey frankfurter leberkas flank pork belly porchetta pork landjaeger beef ribeye alcatra picanha hamburger tongue. Cow bacon ribeye sirloin pancetta sausage pork loin jerky short ribs corned beef biltong hamburger. 
      </p> 
     </div> 
     <div class="content"> 
      <strong>Hamburger pastrami strip steak turkey landjaeger sirloin tail pig shoulder tri-tip. Tail swine flank meatball turkey andouille drumstick pancetta sausage tri-tip spare ribs ribeye.</strong> 
      <p> 
      Jowl turkey tri-tip salami. Porchetta fatback corned beef, andouille ham hock chuck cow short loin bresaola. Landjaeger sausage spare ribs kielbasa filet mignon capicola biltong. Sausage t-bone doner hamburger, tri-tip cupim andouille. 
      </p> 
     </div> 
     <div class="content"> 
      <strong>Jerky cow meatloaf pastrami landjaeger bacon ground round shank venison jowl pork belly biltong capicola kevin pig. Filet mignon alcatra pancetta strip steak pork belly.</strong> 
      <p> 
      Alcatra pastrami shoulder doner brisket spare ribs turducken chuck kevin tenderloin flank. Pig hamburger tenderloin, pork cow pancetta ground round kielbasa bresaola shank fatback sirloin beef ribs tail beef. Chicken ham hock salami shoulder, andouille fatback filet mignon bresaola venison. 
      </p> 
     </div> 
     <img src="http://www.gif-favicon.com/images/flowers/pink-flowers-transparent-clipart-0400-10054.gif" /> 
    </div> 
    </div> 
</body> 
</html>

和我的CSS代碼：

body { 
    background-image: url("img/news_background.jpg"); 
} 
header { 
    border-bottom: 2px solid #000; 
    padding: 20px; 
} 
div.header-Box { 
    border: 2px solid #000; 
    display: inline-block; 
} 
h1, 
h2, 
h3 { 
    text-align: center; 
} 
h2 { 
    font-size: 40px; 
    margin: 0px; 
} 
h3 { 
    font-size: 15px; 
    margin: 0px; 
} 
div.infoBorder { 
    border-top: 2px solid #000; 
    border-bottom: 2px solid #000; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    padding: 5px; 
} 
span { 
    font-weight: bold; 
    margin: 160px; 
} 
div#main-Content { 
    border-top: 2px solid #000; 
} 
div.content { 
    display: inline-block; 
    width: 240px; 
    height: 280px; 
    border: 1px solid #000; 
    padding: 10px; 
}

來源

2015-11-19 Nasco.Chachev

定義CSS這個

Demo

div.content { 
    vertical-align: top; 
}

=== 第2期是這個決心

改變你的HTML這個

<header> 
     <hgroup> 
      <h2>THE OLD POST</h2> 
      <h3>ILLUSTRATED WEEKLY NEWSPAPER</h3> 

     </hgroup> 
     <div class="header-Box"> 
       <strong>This is a story about one pig</strong> 
      </div> 
    </header>

，寫這個CSS

header { 
    text-align: center; 
} 
hgroup { 
    display: inline-block; 
    vertical-align: top; 
} 
div.header-Box { 
    display: inline-block; 
    vertical-align: top; 
}

Updated Demo

來源

2015-11-19 09:41:49

人感謝你，幫助我對issue.If你有了第一個任何想法的人，請分享me.I'll你的想法很高興，並且你的答案檢查爲好。 –

@ Nasco.Chachev你可以改變你的html –

你是什麼意思，兄弟？我的意思是你的垂直對齊幫助我將div放在同一行，但我仍然想念我的標題框問題。我想把它放在我的頭條旁邊，我已經發布了一個原創設計。請檢查鏈接 –

float: left;

...是關鍵。只需將它添加到你的段落。

來源

2015-11-19 09:47:07 TheLexoPlexx

<hgroup> { 
    positon: relative; 
} 

add: 

div.header-Box { 
    position: absolute; 
    top: 50px; 
    right: 40px; 
} 

div.content { 
    vertical-align: top; 
}

來源

2015-11-19 09:47:29

嗯......這並不令人滿意。它不以我想要的方式工作。您的代碼將標題框放在標題下方。我想將它放在標題旁邊，所有內容都放在頁面中間。 –

CSS定位問題。詳細解釋

回答

相關問題