Question

Hello stackoverflowers，

我的目标是以下布局：https://www.screencast.com/t/wZeMOhzE7K

我当前的布局中右上方的div会陷入应居中的div图标中。

这是CSS / HTML。非常感谢帮助。

.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.places h1 {
  align-content: top-left;
  font-size: 30px;
  width: 100%;
}

.places article {
  width: 390px;
  border: #FF5A5F 1px solid;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
}

.places article h2 {
  font-size: 30px;
  text-align: center;
}

/*exercise 8*/
.price_by_night {
    color: #FF5A5F;
    border: 4px solid #FF5A5F;
    border-radius: 50%;
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    font-size: 30px;
    text-align: center;
    margin: 0;
    float: right;
    line-height: 60px;
}

.information {
  height: 80px;
  border-top: #DDDDDD 1px solid;
  border-bottom: #DDDDDD 1px solid;
}

.max_guest {
  background-image:url("images/icon_group.png");
  background-repeat: no-repeat;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
}

.number_rooms {
  background-image:url("images/icon_bed.png");
  background-repeat: no-repeat;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
}

.number_bathrooms {
  background-image:url("images/icon_bath.png");
  background-repeat: no-repeat;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
}

.user {
  margin-bottom: 10px;
}

.description {
  text-align: left;
  float: left;
}

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="8-places.css" media="all">
  </head>
  <body>
    <header>
    </header>
      <section class="places">
        <h1>Places</h1>
        <article class="home">
        <h2>Home</h2>
          <div class="price_by_night">$80</div>
          <div class="information">
            <div class="max_guest">3 guests</div>
            <div class="number_rooms">2 rooms</div>
            <div class="number_bathrooms">1 bathroom</div>
            <div class="user"><b>Owner:</b> John Lennon</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
          </div>
        </article>
        <article class="apartment">
        <h2>Apartment</h2>
          <div class="price_by_night">$65</div>
          <div class="information">
            <div class="max_guest">3 guests</div>
            <div class="number_rooms">2 rooms</div>
            <div class="number_bathrooms">1 bathroom</div>
            <div class="user"><b>Owner:</b> Tina Fey</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
          </div>
        </article>
        <article class="dorm">
        <h2>Dorm</h2>
          <div class="price_by_night">$20</div>
          <div class="information">
            <div class="max_guest">3 guests</div>
            <div class="number_rooms">2 rooms</div>
            <div class="number_bathrooms">1 bathroom</div>
            <div class="user"><b>Owner:</b> Lorie</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
          </div>
        </article>
      </section>
    </div>

  </body>
</html>

Answer 1

我希望这是你想要的

＆＃13;

.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.places h1 {
  align-content: top-left;
  font-size: 30px;
  width: 100%;
}

.places article {
  width: 390px;
  border: #FF5A5F 1px solid;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
  position:relative;
}

.places article h2 {
  font-size: 30px;
  text-align: center;
}

/*exercise 8*/
.price_by_night {
    color: #FF5A5F;
    border: 4px solid #FF5A5F;
    border-radius: 50%;
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    font-size: 30px;
    text-align: center;
    margin: 0;
    line-height: 60px;
    position: absolute;
    top: 10px;
    right: 20px;
}

.information {
  height: 80px;
  border-top: #DDDDDD 1px solid;
  border-bottom: #DDDDDD 1px solid;
}

.max_guest {
  background-image:url("https://s32.postimg.org/n1npuo6h1/test.png");
  background-repeat: no-repeat;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
  background-position:center top;
}

.number_rooms {
  background-image:url("https://s32.postimg.org/n1npuo6h1/test.png");
  background-repeat: no-repeat;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
  background-position:center top;
}

.number_bathrooms {
  background-image:url("https://s32.postimg.org/n1npuo6h1/test.png");
  background-repeat: no-repeat;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
  background-position:center top;
}

.user {
  margin-bottom: 10px;
}

.description {
  text-align: left;
  float: left;
}

＆＃13;

<section class="places">
        <h1>Places</h1>
        <article class="home">
        <h2>Home</h2>
          <div class="price_by_night">$80</div>
          <div class="information">
            <div class="max_guest">3 guests</div>
            <div class="number_rooms">2 rooms</div>
            <div class="number_bathrooms">1 bathroom</div>
            <div class="user"><b>Owner:</b> John Lennon</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
          </div>
        </article>
        <article class="apartment">
        <h2>Apartment</h2>
          <div class="price_by_night">$65</div>
          <div class="information">
            <div class="max_guest">3 guests</div>
            <div class="number_rooms">2 rooms</div>
            <div class="number_bathrooms">1 bathroom</div>
            <div class="user"><b>Owner:</b> Tina Fey</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
          </div>
        </article>
        <article class="dorm">
        <h2>Dorm</h2>
          <div class="price_by_night">$20</div>
          <div class="information">
            <div class="max_guest">3 guests</div>
            <div class="number_rooms">2 rooms</div>
            <div class="number_bathrooms">1 bathroom</div>
            <div class="user"><b>Owner:</b> Lorie</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
          </div>
        </article>
      </section>

＆＃13;

Answer 2

将<div class="price_by_night">$80</div>行放在<h2>Home</h2>

之前

它有效......

查看有效的代码：http://codepen.io/shubham93/pen/PWggev

Answer 3

＆＃13;

.places article {
  position: relative;
}
.price_by_night {
    position: absolute;
    top: 20px;
    right: 20px;
}

＆＃13;

Answer 4

试试这个，这对你有帮助。您必须添加背景图像大小和位置以实现其位置和大小相关属性。

＆＃13;

.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.places h1 {
  align-content: top-left;
  font-size: 30px;
  width: 100%;
}

.places article {
  width: 390px;
  border: #FF5A5F 1px solid;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
}

.places article h2 {
  font-size: 30px;
  text-align: center;
}


/*exercise 8*/

.price_by_night {
  color: #FF5A5F;
  border: 4px solid #FF5A5F;
  border-radius: 50%;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  font-size: 30px;
  text-align: center;
  margin: 0;
  float: right;
  line-height: 60px;
}

.information {
  height: 80px;
  border-top: #DDDDDD 1px solid;
  border-bottom: #DDDDDD 1px solid;
}

.max_guest {
  background-image: url("http://workshops.jazzbooks.com/wp/wp-content/themes/mydreamdesign/images/icon-author.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_rooms {
  background-image: url("http://www.freeiconspng.com/uploads/bedroom-icon-0.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_bathrooms {
  background-image: url("https://cdn2.iconfinder.com/data/icons/architecture-interior/24/architecture-interior-17-512.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  height: auto;
  display: inline-block;
  margin: 7px;
  line-height: 100px;
  text-align: center;
}

.user {
  margin-bottom: 10px;
}

.description {
  text-align: left;
  float: left;
}

＆＃13;

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="8-places.css" media="all">
</head>

<body>
  <header>
  </header>
  <section class="places">
    <h1>Places</h1>
    <article class="home">
      <div class="price_by_night">$80</div>
      <h2>Home</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> John Lennon</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="apartment">
      <div class="price_by_night">$65</div>
      <h2>Apartment</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Tina Fey</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="dorm">
      <div class="price_by_night">$20</div>
      <h2>Dorm</h2>

      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Lorie</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
  </section>
  </div>

</body>

</html>

＆＃13;

将div图标对齐到中心，父div与右上角对齐

4 个答案: