如何在css中將頁面平均分為左右？

我需要將整個頁面平均分為左右兩部分，并使內容在左右部分垂直對齊。表示影像和文本應在同一點結束并在同一垂直線上對齊。如何創建這樣的回應式布局？更具體地說，我需要做etoro.com所做的事情。 這是我要實作的布局

uj5u.com熱心網友回復：

使用 CSS，您可以創建網格：

這是一個小例子：

.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div> 
</div>

這是來自 w3schools 的一些檔案。希望這會有所幫助：https ://www.w3schools.com/css/css_grid.asp

uj5u.com熱心網友回復：

您可以選擇實作的一種方法是 CSS 列邏輯。

使用 table 和 tr 標簽，您可以在每列中創建行來存盤單個元素。

您將在螢屏的左右兩半使用列 div，并在內部為每個專案使用 tr div，如下所示：

.container
{
    float:center;
}

.column
{
    float: left;
    width: 50%;
}

.element
{
    border: 3px solid green;
    margin: 3px 3px 3px 3px;
}

<div class="container">
      <div class="column">
        <h1 style="text-align:center;">Column #1</h1>
        <table>
          <tr>
            <div class="element">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales est et posuere dapibus.</p>
            </div>
          </tr>
          
          <tr>
            <div class="element">
              <p>Morbi in felis sit amet quam congue bibendum. </p>
            </div>
          </tr>
          
          <tr>
             <div class="element">
              <p>Nullam suscipit elit blandit, sagittis ligula ac, iaculis magna.</p>
            </div>
          </tr>
        </table>
      </div>
      <div class="column">
        <h1 style="text-align:center;">Column #2</h1>
        <table>
          <tr>
            <div class="element">
              <p>Curabitur magna lectus, scelerisque vitae velit a, auctor gravida ex.</p>
            </div>
          </tr>
          
          <tr>
            <div class="element">
              <p>Donec erat quam, iaculis vitae orci id, aliquam pretium ante.</p>
            </div>
          </tr>
          
          <tr>
             <div class="element">
              <p>Praesent quis libero malesuada arcu iaculis cursus.</p>
            </div>
          </tr>
        </table>
      </div>
</div>

uj5u.com熱心網友回復：

您可以flex用于頁面布局：

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

img {
  width: 100%;
}

.left,
.right {
  padding: 20px;
  width: 50%;
}

.content {
  width: 80%;
  margin: 40px auto;
}

.title {
  text-align: center;
}

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .left,
  .right {
    width: 100%;
  }
  .content {
    width: 100%;
  }
}

<div class="title">
  <h1>Title</h1>
</div>
<div class="container">
  <div class="left">
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
    <div class="content">This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.</div>
  </div>
  <div class="right">
    <div class="content">This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.</div>
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
  </div>
</div>

標籤：

上一篇：如何在保持縱橫比的同時縮放背景影像以適應螢屏的整個寬度？當我使用“封面”時，高度被切斷

下一篇：更改click-javascript影片的位置