All geek questions in one place

Anyone have a better way to do this? I just learned to play with CSS

Image is the goal. I need to correctly place each color inside the box. It should also be in the center of the browser. As a result, I got exactly that image with only words. I'm really looking for a better way to do this, because I had to guess the left and bottom pixels. I also know that this could be done better and it would be very interesting to know how to do it.

enter image description here

.border{
  border: 2px solid black;
  width: 500px;
  height: 700px;
  margin:25px 450px;
  padding: 1px;
}

#one {
  background: red;
  height:100px;
}

#two{
 background: yellow;
 height:600px;
 width:100px;
}

#three {
  background: blue;
  height:550px;
  width:300px;
  position: relative;
  left: 100px;
  bottom: 600px;
}

#four{
  background: yellow;
  height: 600px;
  width:100px;
  position: relative;
  left:400px;
  bottom: 1150px;
}

#five{
  background: green;
  height:50px;
  width:300px;
  position: relative;
  left: 100px;
  bottom: 1200px;
 }
   <div class="border">
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div>
    <div id="five">Five</div>
   </div>
Run codeHide result
+4
source share
3 answers

, width height .border. .border vw vh width height , .

, , , , . , , .

#middle #bottom, . , float #left, #middle_container #right , width #bottom.

, margin: 0 auto .border, , ( ).

:

.border {
  border: 2px solid black;
  width: 50vw;
  height: 100vh;
  padding: 1px;
  margin: 0 auto;
}

.top {
  background: red;
  width: 100%;
  height: 20%;
}

.left,
.middle_container,
.right {
  float: left;
}

.left {
  background: yellow;
  width: 20%;
  height: 80%;
}

.middle_container {
  width: 60%;
  height: 80%;
}

.middle {
  background: blue;
  height: 80%;
}

.bottom {
  background: green;
  height: 20%;
  bottom: 0;
}

.right {
  background: yellow;
  width: 20%;
  height: 80%;
}
<body>
  <div class="border">
    <div class="top">Top</div>
    <div class="left">Left</div>
    <div class="middle_container">
      <div class="middle">Middle</div>
      <div class="bottom">Bottom</div>
    </div>
    <div class="right">Right</div>
  </div>
</body>
Hide result

, !:)

+5

@Obsidian Age, , css flexbox.

:

MDN

CSS-tricks

.border {
  border: 2px solid black;
  width: 50vw;
  height: 100vh;
  padding: 1px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap
}

.top {
  background: red;
  height: 20%;
  flex: 100%;
}

.left,
.right,
.middle_container,
.middle {
  height: 80%;
}

.left,
.right {
  background: yellow;
  flex: 1
}

.middle_container {
  flex: 3;
}

.middle {
  background: blue;
}

.bottom {
  background: green;
  height: 20%;
}
<div class="border">
  <div class="top">Top</div>
  <div class="left">Left</div>
  <div class="middle_container">
    <div class="middle">Middle</div>
    <div class="bottom">Bottom</div>
  </div>
  <div class="right">Right</div>
</div>
Hide result
0

, , , , . .;

.border{
      position:fixed; /*or absolute*/
      top:50%; /* add this */
      left:50%; /* add this */
      margin-top:-350px; /*half of your height*/
      margin-left:-250px; /*half of your width*/
      border: 2px solid black;
      width: 500px;
      height: 700px;
      padding: 1px;
}


.border{
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-350px;
  margin-left:-250px;
  border: 2px solid black;
  width: 500px;
  height: 700px;
  padding: 1px;
}

#one {
  background: red;
  height:100px;
}

#two{
 background: yellow;
 height:600px;
 width:100px;
}

#three {
  background: blue;
  height:550px;
  width:300px;
  position: relative;
  left: 100px;
  bottom: 600px;
}

#four{
  background: yellow;
  height: 600px;
  width:100px;
  position: relative;
  left:400px;
  bottom: 1150px;
}

#five{
  background: green;
  height:50px;
  width:300px;
  position: relative;
  left: 100px;
  bottom: 1200px;
 }
<div class="border">
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div>
    <div id="five">Five</div>
   </div>
Hide result
-1

Source: https://habr.com/ru/post/1690360/

More articles:


All Articles