Question

我试图在不使用<table>的情况下创建2列表结构，在第2列中，当文本溢出时我希望它保持在右侧。这是我的代码到目前为止 - {{3 }}

<div class="mainbox">

  <span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
  <div class="myhr"></div>
  <span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>


</div>

和我的css

.mainbox {
  max-width: 300px;
  margin: auto;
  border: 1px solid #454242;
  margin-top: 30px;
}

hr {
  border-top: 3px solid rgba(44, 44, 44, 0.69);
}

.leftbox {
  border-right: 1px solid #303925;
  font-size: 20px;
  padding: 5px;
  min-width: 150px;
  display: inline-block;
}

.myhr {
  border-bottom: 1px solid #293A42;
}

.rightbox {
  font-size: 16px;
  min-width: 150px;
}

Answer 1

您可以将display: table用于此

示例：

<div class="table">
  <div class="table-row">
    <div class="cell">
      text 1
    </div>
    <div class="cell">
      text 2
    </div>
  </div>
    <div class="table-row">
    <div class="cell">
      text 3
    </div>
    <div class="cell">
      text 4
    </div>
  </div>
</div>

的CSS：

.table {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
}

.table-row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid black;
}

https://jsfiddle.net/41vpjpuy/

Answer 2

我不确定<hr>和.myhr是什么，所以我猜测它是跨越两个列。我使用display: table-cell用于.leftbox和.rightbox并当然.mainbox display: table并添加了table-layout: fixed，因此您的长度可以更有意义。

Reference

Fiddle

<强>段

＆＃13;

.mainbox {
  max-width: 300px;
  margin: auto;
  border: 1px solid #454242;
  margin-top: 30px;
  display: table;
  table-layout: fixed;
  border-spacing: 3px;
  border-collapse: separate;
}
hr {
  border-top: 3px solid rgba(44, 44, 44, 1);
  width: 200%;
}
.leftbox {
  border-right: 1px solid #303925;
  font-size: 20px;
  padding: 5px;
  min-width: 150px;
  display: table-cell;
}
.myhr {
  border-bottom: 2px solid #000;
  display: table-row;
  width: 200%;
  min-height: 30px;
  padding: 5px;
}
.rightbox {
  font-size: 16px;
  min-width: 150px;
  display: table-cell;
}

＆＃13;

<div class="mainbox">

  <span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
  <div class="myhr">
    <hr/>
  </div>
  <span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>


</div>

＆＃13;

Answer 3

此外，请尝试这一点。我编辑了你的CSS和HTML

<div class="mainbox">
  <div class="row">
    <span class="leftbox">State</span>: <span class="rightbox">TAMILNADU TAMILNADUTAMILNADU TAMILNADU</span>
  </div> 
  <div class="row">
    <span class="leftbox">Phone</span>: <span class="rightbox">landline</span>
  </div>
</div>

CSS：

.mainbox {
     max-width: 300px;
    margin: auto;
    border: 1px solid #454242;
    margin-top: 30px;
    display: table;
}
.row {
    display:table-row;
}
{
    border-top: 3px solid rgba(44, 44, 44, 0.69);
}
.leftbox {
    border-right: 1px solid #303925;
    font-size: 20px;
    padding: 5px;
    min-width: 150px;
    word-wrap: break-word;
    display: table-cell;
    width:25%;
}
.myhr
{
    border-bottom: 1px solid #293A42;

}
.rightbox {
  /* word-wrap: break-word; */
    font-size: 16px;
 min-width: 150px;
 display:table-cell;
}

Html表就像没有表的结构

3 个答案: