CSS定位问题。详细解释

Question

我有 2 个问题无法解决 them.I 我正在尝试进行与相同的设计。

我无法调整 header 中的框，以保持在我的标题旁边 tags.And 另一个问题是，我无法将所有内容元素放在一行中。一个在上面，另一个在另一个下面有 5 个像素..我试图用 Paint 来展示问题这是我的代码，如果有人能帮助我，我会很高兴 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;
}

Answer 1

定义你的css这个

Demo

div.content {
    vertical-align: top;
}

=== 第二期是这个解决

改变你的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

Answer 2

float: left;

...是关键。只需将其添加到您的段落即可。

Answer 3

<hgroup> {
    positon: relative;
}

add:

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

div.content {
   vertical-align: top;
}

CSS定位问题。详细解释

CSS Positioning issues. Detaily explained

html

css

division