并排放置兩個html部分的最佳方法 -有解無憂

總結問題

。

本問題的目的是找到并排顯示兩部分 html 的最佳方法。理想情況下，我希望能夠像這樣將 UI 分割開來

。

而不是當前的設定

描述你已經嘗試過的東西

我已經嘗試過自己修改HTML，但我想從更有經驗的開發人員那里得到建議，了解如何做這件事。

顯示一些代碼

<center> 
        <div id="boxstyle"/span>>
          <h3 id="h3style">Section 5. 2詞語匹配練習</h3>第5節。

          <center>/span>
            <div class="inputBoxes"/span>>
              用戶輸入。
              <table id="tablestyle"> 用戶輸入: class="inputBoxes">
                <td> 
                  < input id="el1"/span> type="text" value=""> 
                </td> 
                <td> 
                  < input id="el2" type="text" value=""> 
                </td> 
                <td> 
                  < input id="el3" type="text" value=""> 
                </td> 
                <td> 
                  < input id="el4" type="text" value=""> 
                </td> 
                <td> 
                  < input id="el5"/span> type="text" value=""> 
                </td> 
              </table>/span>
            </div> 
          </center> 
          <center>/span>
            <div class="inputBoxes"/span>>
              在HTML中的結果。
              <table id="tablestyle"> 結果在HTML中：<id=>
                <td>/span>
                  < input id="dl1"/span> type="text" value=""> 
                </td> 
                <td> 
                  < input id="dl2"/span> type="text" value=""> 
                </td> 
                <td> 
                  < input id="dl3"/span> type="text" value=""> 
                </td> 
                <td> 
                  < input id="dl4"/span> type="text" value=""> 
                </td> 
                <td> 
                  < input id="dl5"/span> type="text" value=""> 
                </td> 
              </table>/span>
              <span style="padding。3px">
                < button id ="one" class="button" type="button" onClick="process_input()" > 生成html</button>。
              </span>/span>
            </div>/span>
          </center> 
          <center>

uj5u.com熱心網友回復：

你可以嘗試學習CSS Flexbox。例如：

。

span class="hljs-selector-class">.row {
  display: flex;
}

.column {
  flex: 50%;
  text-align: center;
}

.column-1 {
  background-color: 紅色。
}

.column-2 {
  background-color: blue;
}

<div class="row" > 
  <div class="column column-1"/span>> 列1</div>。
  <div class="column column-2"/span>> Colum 2</div> 
</div>

uj5u.com熱心網友回復：

你可以搜索像Bootstrap這樣的框架，他們有內置的類來為你的HTML做行、列和自定義布局

uj5u.com熱心網友回復：

這是對CSS Flexbox的完美運用

這是一個完整的CSS Flexbox。

CSS技巧

uj5u.com熱心網友回復：

你可以使用flexbox來做這個。
所有的輸入被包圍在inputBoxes中，其中display:flex;。center標簽不再被使用，所以justify-content: center;被用來對齊flex box。同樣地，所有的文本也被用text-align: center;

來對齊。

。

<html lang="en"> /span>
<head>/span>
    <title>Document</title> 
</head> 
<body> 
    <div id = "boxstyle"> 
         <h3 id="h3style">第五節。 2 詞語匹配練習</h3>
         用戶輸入。
         <div class="inputBoxes">/span>
              <div>< input id="el1"/span> type="text" value=""> </div>>
              <div>< input id="el2" type="text" value=""> </div>>
              <div>< input id="el3"/span> type="text" value=""> </div>>
              <div>< input id="el4" type="text" value=""> </div>>
              <div>< input id="el5"/span> type="text" value=""> </div>>
         </div> 
        
          在HTML中的結果:
         
              <div>< input id="dl1"/span> type="text" value=""> </div>>
              <div>< input id="dl2"/span> type="text" value=""> </div>>
              <div>< input id="dl3"/span> type="text" value=""> </div>>
              <div>< input id="dl4"/span> type="text" value=""> </div>>
              <div>< input id="dl5"/span> type="text" value=""> </div>>
         </div>/span>
         <span style="padding。3px">
                < button id ="one" class="button" type="button" onClick="process_input()" > 生成html</button>。
         </span>/span>
    </div>/span>
</body> 


<style>
body{ 
    text-align: center;
    }
.inputBoxes{
    display: flex;
    justify-content: center;
}

.inputBoxes div{
    margin-left: 2%;
}

</style>>
</html>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/333720.html

標籤：

上一篇：沒有找到物體型別'EntityQueryable<Entrys>'。確保該物體型別已被添加到模型中。

下一篇：元標簽顯示在<body>中，而應該放在<head>中。