框中的框+文本，在页面上对齐HTML/CSS [英] Boxes in boxes + text, alignment on the page HTML/CSS

问题描述

我需要将文本并排放置在两个框内，每个框的右上角都有一个标头类型的元素.到目前为止，这就是我要做的事情:我想要做的事，但是看起来很丑，因为它有点不对齐.有什么更好的方法呢?虽然没有引导程序.

I need to arrange my text in boxes, two boxes side by side, and each box has a header-type of element at the top-right corner. This is what I have come up so far: does what I want, but looks ugly, because it is slightly out of alignment. What would be a better way to do it? no bootstrapping though.

p {
  border: 1px solid black;
}

#p1 {
  width: 60px;
  height: 20px;
  background-color: Orange;
  font-size: large;
  float: right;
}

#p2 {
  border: 1px solid black;
  background-color: DodgerBlue;
}

#dogerbox {
  border: 1px solid black;
  background-color: DodgerBlue;
}

div+p {
  width: 40px;
  height: 80px;
  background-color: Orange;
  font-size: large;
  float: right;
}

#first {
  width: 330px;
  height: 250px;
  background: LightBlue;
  overflow: visible;
  border: 1px solid black;
}

#first #headers {
  position: relative;
  width: 20%;
  height: 7%;
  margin: auto;
  margin-bottom: 65%;
  background: Orange;
  left: 6px;
  float: right;
  border: 1px solid black;
  margin: 1px;
}

#second {
  width: 330px;
  height: 250px;
  background: LightBlue;
  overflow: hidden;
  border: 1px solid black;
  position: relative;
  left: 332px;
  bottom: 252px;
  margin: 1px;
}

#second #headers {
  position: relative;
  width: 20%;
  height: 7%;
  margin: auto;
  margin-bottom: 65%;
  background: Orange;
  left: 6px;
  float: right;
  border: 1px solid black;
}

<div id="first">
  <div id="headers"> First box </div>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
  content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
  have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div id="second">
  <div id="headers"> Second box</div>
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
  one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
  et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
  1.10.32.
</div>
<div>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
  content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
  have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

推荐答案

我强烈建议您使用css-grid或flexbox作为现代方法.在这种情况下，使用css-grid是更好的方法，因为可以同时控制其高度和宽度.

I highly recommend you to use a css-grid or a flexbox for modern approach. In this case a css-grid is the better approach as it can be controlled in height and width simultaniosly.

为此，我将您的2个盒子包装在另一个div中，其类为: grid-wrapper .我使用以下代码将该框更改为网格系统: display:grid; .要获得2列，请使用: grid-template-columns:repeat(2，1fr); .如果需要3列，则可以将2更改为3或任意更多的数字.要分隔这些框，可以使用: grid-gap .

For that I wrapped your 2 boxes in another div with the class: grid-wrapper. I changed that box to a grid system by using: display: grid;. To get 2 columns you use: grid-template-columns: repeat(2, 1fr);. If you want 3 columns, you change the 2 into a 3 or any number you like for more. To seperate the boxes, you can use: grid-gap.

我想提醒您的一件事:通过两次使用ID #header 来无效使用HTML.ID必须是唯一的.总是！因此，我将其更改为一个类.

One thing I want to make you aware of: You had an invalid HTML use by using the ID #header twice. An ID has to be unique. ALWAYS! As such, I changed it into a class.

body {
  margin: 0;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  padding: 10px;
}

#first,
#second {
  background: LightBlue;
  border: 1px solid black;
  padding: 10px;
}

.headers {
  width: 40%;
  height: auto;
  margin: -8px -8px 0.2em 0.2em;
  background: Orange;
  float: right;
  border: 1px solid black;
  text-align: center;
}

<div class="grid-wrapper">
  <div id="first">
    <div class="headers"> First box </div>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
    content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
    versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
  <div id="second">
    <div class="headers"> Second box</div>
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32.
  </div>
</div>

这篇关于框中的框+文本，在页面上对齐HTML/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！