Есть ли способ, которым я могу располагать 2 элемента div друг над другом, но не перекрывая друг друга?

ProgramBox

Есть ли способ, которым я могу располагать 2 элемента div друг над другом, но не перекрывая друг друга?

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

#html #css

#HTML #css

Вопрос:

Что я хочу сделать, так это сделать так, чтобы мои боковые панели были справа, а не слева. Я пытался использовать display: grid; , и это не сработало. Я пытался использовать left: 0; и right: 0; в css. У меня ничего не работает. Мой полный код находится по адресу github.com .

Пожалуйста, не указывайте цвета, я пытался нарисовать это в Google drawings, так что это нехорошо.

Вот как это:

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

1. Хорошей идеей будет включить сюда соответствующий код (html, css), поэтому, даже если предоставленная вами ссылка когда-нибудь оборвется, ваш вопрос все равно будет полезен другим пользователям.

Ответ №1:

Вы могли бы использовать такую сетку. Подробные объяснения см. здесь

 *,
 :before,
 :after {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 60% 40%;
  grid-template-areas: "header header" "content cards";
  width: 100%;
}

#header {
  grid-area: header;
}

#content {
  grid-area: content;
}

#cards {
  grid-area: cards;
}

 <h3 id="header">Welcome to my GitHub Pages website this is where you can learn about me, find my games, and suggest ideas for anything!</h3>
<div id="content">
</div>
<div id="cards" class="cards">
  <div id="project1" class="project-card">
    <h1>
      Web Designer Tycoon
    </h1>
    <p>This is a idle tycoon like game where you have to make money by making web programs. People buy your web programs for money. If you get better at coding (in the game) then you will get more money for each program you make. Itis currently in the BETA
      stage and it will get released after lots of testing and a couple more changes. Thank you for your patience. <span onclick="window.location.href = 'https://codepen.io/hacker19374/project/full/Zyraey/'">Click me to go to Web Designer Tycoon</span></p>
  </div>
  <div id="project2" class="project-card">
    <h1>
      Burger Clicker
    </h1>
    <p>This game is a little bit different. It is a clicker game where you clic and click and click over and over to try to get the most money you can and you can use that money to buy</p>
  </div>
</div>

Ответ №2:

Для достижения этой цели существует несколько способов. Но поскольку вы используете css grid, сделайте следующее: добавьте дополнительный класс project-card__1 и project-card__2 к карточкам, а затем укажите столбцы grid-template в вашем css.

Смотрите демонстрацию ниже

 p {
  background-color: #179595;
  width: auto;
}
.project-card {
  margin: 5px;
  width: 25%;
  border: 4px solid #00688b;
  background-color: #008b8b;
  height: 354.33px;
  margin-bottom: 50px;
  margin-right: 50px;
}
h1 {
  text-align: center;
  padding-top: 5px;
}
body {
  background-image: linear-gradient(270deg, #8b0046, #8b008b);
  height: 100vh;
}
span {
  cursor: ;
}
.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  right: 0;
}

.project-card__1 {
  grid-column: 5 / 7;
  grid-row: 1;
  width: 100%;
}
.project-card__2 {
  grid-column: 5 / 7;
  grid-row: 2;
  width: 100%;
}

   <h3>
      Welcome to my GitHub Pages website this is where you can learn about me,
      find my games, and suggest ideas for anything!
    </h3>
    <div id="cards" class="cards">
      <div id="project1" class="project-card project-card__1">
        <h1>Web Designer Tycoon</h1>
        <p>
          This is a idle tycoon like game where you have to make money by making
          web programs. People buy your web programs for money. If you get
          better at coding (in the game) then you will get more money for each
          program you make. Itis currently in the BETA stage and it will get
          released after lots of testing and a couple more changes. Thank you
          for your patience.
          <span
            onclick="window.location.href = 'https://codepen.io/hacker19374/project/full/Zyraey/'"
            >Click me to go to Web Designer Tycoon</span
          >
        </p>
      </div>
      <div id="project2" class="project-card project-card__2">
        <h1>Burger Clicker</h1>
        <p>
          This game is a little bit different. It is a clicker game where you
          clic and click and click over and over to try to get the most money
          you can and you can use that money to buy
        </p>
      </div>
    </div>

1. Спасибо, я собирался продолжать пробовать сетку, но я действительно не понял этого. Единственная проблема с этим заключается в том, что боковые карты касаются края экрана

2. Нет проблем, я рад, что помог, счастливого кодирования!

3. добавьте поле в класс .cards, например: margin: 10px, и это будет держать их подальше от края