Мне нужна помощь в правильном выравнивании одного из моих HTML-полей

ProgramBox

Мне нужна помощь в правильном выравнивании одного из моих HTML-полей

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Мне нужна помощь с моим HTML-и CSS-кодом. Мне нужна помощь, чтобы выровнять большую коробку справа. Я попытался задать этот вопрос в другом посте, но в итоге задал в нем слишком много вопросов. Я в этом новичок. Но в любом случае мне нужна помощь.

Я пытаюсь получить свой HTML:

 * {
  margin: 0px auto;
  padding: 0px auto;
  font-family: sans-serif;
}

body {
  background-color: lightgray;
}

.live_scores {
  background-color: white;
  height: 55px;
  width: auto;
}

.score_header {
  display: flex;
  justify-content: space-evenly;
}

.live_scores_head {
  color: black;
  background-color: white;
  padding-left: 50px;
}

.DSNN_Header {
  background-color: black;
  display: flex;
  justify-content: space-evenly;
  height: 55px;
}

.DSNN {
  color: whitesmoke;
  font-style: italic;
  background-color: red;
  font-weight: bolder;
  transform: rotateY(23px);
}

.sport_list {
  color: whitesmoke;
  text-align: center;
  padding-top: 5px;
  font-size: 25px;
}

.search_icon {
  height: 33px;
  width: 28px;
  padding-top: 5px;
  padding-left: 5px;
}

.hamburger {
  height: 34px;
  width: 29px;
  padding-top: 5px;
  padding-right: 5px;
}

.user_icon {
  height: 34px;
  width: 29px;
  padding-top: 5px;
  padding-left: 5px;
}

.col1 {
  display: inline-block;
  padding-top: 10px;
  padding-left: 35px;
  margin-top: 5px;
}

.box_1 {
  background-color: white;
  border: transparent 2px;
  height: 200px;
  width: 270px;
  display: block;
  border-radius: 5px;
  padding-top: 5px;
}

.top-stories {
  text-decoration: underline;
  text-align: center;
  padding-right: 50px;
}

.box_1_list {
  text-align: left;
  padding-left: 15px;
}

.box_1_text {
  font-size: 15px;
  padding-top: 8px;
}

.box_2 {
  background-color: white;
  padding-top: 10px;
  margin-top: 15px;
  border-radius: 5px;
  border: transparent 2px;
  height: 120px;
}

.custom_dsnn {
  text-align: center;
  text-decoration: solid;
}

.button_row {
  display: flex;
  padding-left: 20px;
  padding-top: 25px;
}

.button1 {
  background-color: blue;
  padding: 5px 5px;
  width: 110px;
  box-shadow: 3px 3px;
  border: solid 3px;
}

.signup {
  background-color: white;
  border: solid 3px;
  box-shadow: 3px 3px;
  width: 110px;
}

#box_3 {
  padding-top: 10px;
  margin-top: 15px;
  border: transparent 2px;
  height: 120px;
  border-radius: 5px;
  background-color: white;
}

.disappear {
  background-color: bisque;
  border: solid 3px;
  margin-left: 65px;
  margin-top: 50px;
  box-shadow: 3px 3px;
}

.never {
  text-align: center;
  text-decoration: solid;
}

.col2 {
  display: inline;
  padding-left: 95px;
  margin: 20px 20px;
}

.box_4 {
  background-color: white;
  border-radius: 5px;
  border: transparent 5px;
  height: 700px;
  width: 880px;
  margin-left: 600px;
  margin-bottom: 1800px;
  object-position: 5px;
}

.box4_headline {
  margin-right: 15px;
  font-size: 33px;
  text-align: right;
}

.live_symbol {
  align-content: left;
  height: 60px;
  width: 95px;
  margin-left: 5px;
}

.b4_list1 {
  position: left;
  justify-content: space-between;
  object-position: 800px;
}

.b4_list2 {
  position: right;
  justify-content: space-between;
  object-position: 500px;
}

.ninja1 {
  color: lightseagreen;
  font-size: 35px;
}

.ninja_symbol {
  height: 155px;
  width: 170px;
  padding-top: 10px;
  padding-left: 5px;
}

.tenw {
  color: lightgray;
  font-size: 15px;
}

.ninjascore {
  font-size: 50px;
}

.ninascore1 {
  background: transparent;
  font-size: 50px;
}

.pirate_symbol {
  height: 155px;
  width: 170px;
}

.pirate1 {
  color: red;
  font-size: 35px;
}

.twelvew {
  color: lightgray;
  font-size: 15px;
}

.vs {
  text-align: center;
}

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.gameinfo {
  border-top: black solid;
  text-align: center;
}

.readmore {
  color: lightskyblue;
}

 <div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">amp;times;</span> The Ninjas have just won!
</div>
<div class="live_scores">
  <div class="score_header">
    <h1 class="live_scores_head">Live Scores</h1>
    <ul>
      <ul>SJC Ninjas - 314</ul>
      <ul>NS Pirates - 159</ul>
    </ul>
    <ul>
      <ul>CHI Samurai - 0</ul>
      <ul>TUL Wizards - 0</ul>
    </ul>
    <ul>
      <ul>BOS Hackers - 13</ul>
      <ul>TYO Youkai - 37</ul>
    </ul>
    <ul>
      <ul>BOI Knights - 5</ul>
      <ul>SEA Sea Lions- 11</ul>
    </ul>
  </div>
</div>
<div class="DSNN_section">
  <div class="DSNN_Header">
    <h1 class="DSNN">amp;nbsp DSNN amp;nbsp</h1>
    <p class="sport_list">Football</p>
    <p class="sport_list">Basketball</p>
    <p class="sport_list">Baseball</p>
    <p class="sport_list">Soccer</p>
    <p class="sport_list">More...</p>
    <img src="assetssearch-light.png" class="search_icon">
    <img src="assetshamburger-light.png" class="hamburger">
    <img src="assetsuser-circle-light.png" class="user_icon">
  </div>
</div>
<div class="col1">
  <div class="box_1">
    <h1 class="top-stories">Top Stories</h1>
    <ul class="box_1_list">
      <ul class="box_1_text">Ninjas up big in 5th</ul>
      <ul class="box_1_text">Best sports cities</ul>
      <ul class="box_1_text">Choi joins Hall of Fame</ul>
      <ul class="box_1_text">Tournament underway</ul>
      <ul class="box_1_text">Samurai at Wizards...</ul>
    </ul>
  </div>
  <div class="box_2">
    <h4 class="custom_dsnn">Customize Your DSNN</h4>
    <div class="button_row">
      <button class="button1" type="submit">Sign In</button>
      <button class="signup" type="submit">Sign Up</button>
    </div>
  </div>
  <div id="box_3" onclick="hide(this)">
    <h4 class="never">Never miss a play</h4>
    <button onclick="hide(Element)" class="disappear" type="checkbox">Subscribe</button>
  </div>
</div>
<div class="box_4">
  <h3 class="box4_headline"><img src="assetslive symbol.jpg" class="live_symbol">amp;nbsp amp;nbsp amp;nbsp Ninjas leading Pirates</h3>
  <ul class="b4_list1">
    <ul><img src="assetssjc-ninjas.png" class="ninja_symbol"></ul>
    <ul class="SJ">San Jose</ul>
    <ul class="ninja1">Ninjas</ul>
    <ul class="tenw">(10 W - 3L)</ul>
    <button class="ninjascore">
                <span class="ninjascore1">319</span>
            </button>
  </ul>
  <p class="vs">VS</p>
  <ul class="b4_list2">
    <ul><img src="assetsns-pirates.png" class="pirate_symbol"></ul>
    <ul class="NS">Nova Scotia</ul>
    <ul class="pirate1">Pirates</ul>
    <ul class="twelvew">(12 W - 2 L)</ul>
    <button class="piratecore" onclick="">
                <span class="piratescore1">159</span>
            </button>
  </ul>
  <p class="gameinfo">A conservative match between two top-performing sides in the Central League Division with a Number 1 seed at stake...</p>
  <p class="readmore">Get more live updates...</p>
</div>

Я хочу, чтобы это выглядело так

но вместо этого я получаю это

Как я могу переместить большую коробку наверх и правильно выровнять вещи внутри нее? Я хочу знать, что я делаю не так.

Ответ №1:

Взгляните на этот пример https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_images_side_by_side

В принципе, вам нужно создать строку, и каждое изображение должно быть столбцом этой строки.

Ответ №2:

Вам нужен контейнер с двумя столбцами внутри. Затем внутри каждой колонки вы можете разместить другие материалы. Установите контейнер в display: flex; положение . Вот пример.

 * {
  box-sizing: border-box;
}

.container {
  display: flex;
}

.left-column {
  flex-grow: 1;
}

.right-column {
  flex-grow: 3;
}

.cell {
  border: 1px solid black;
  padding: 1rem;
  margin: 1rem;
}

 <div class="container">
  <div class="left-column">
    <div class="cell">Box 1</div>
    <div class="cell">Box 2</div>
    <div class="cell">Box 3</div>
  </div>
  <div class="right-column">
    <div class="cell">
      <h3>Heading</h3>
      <p>Paragraph</p>
    </div>
  </div>
</div>

Метки: Мне нужна помощь в правильном выравнивании одного из моих HTML-полей

Вопрос:

Ответ №1:

Ответ №2:

Вам также может понравиться

Сельдерей запускает периодическую задачу вручную

Ошибка ключа: «ENV» при использовании python для чтения среды операционной системы

Как использовать фильтр исключений в nest.js