Question

需要构建这样的结构

我尝试了border-spacing但显然它已应用于所有单元格。是否可以删除标签和文本单元格之间的空间？或者我应该在整个结构中使用div？获得这种结构的正确方法/做法是什么？

编辑：谢谢大家的建议，你们真棒。我会记住只使用表格作为表格。现在我决定尝试GCyrillus的解决方案。

Answer 1

你会用flex吗？如果是，则调整容器填充和子边距。

＆＃13;

* {
  box-sizing:border-box;
}
main {
  display:flex;
  flex-wrap:wrap;
  margin:2em;
  padding:1em 2em;/* mimic your border-spacing */
  border:solid;
  justify-content:space-between;
}
header {
  border:solid;
  width:100%;
  padding:2em;/* adapt to content , value for demo purpose */
}
div {
  margin-top:2em;/* mimic your border-spacing */
  width:43%;/* mimic your middle border-spacing tune width to your needs  */
  display:flex;
}
div p {
  margin:0;/* reset */
  flex:1;
  border:solid;
  padding:2em;/* adapt to content , value for demo purpose */
}

＆＃13;

<main>
  <header>header</header>      
  <div>
    <p> text</p>
    <p>text</p>
  </div>
  <div>
    <p> text</p>
    <p>text</p>
  </div>
  <div>
    <p> text</p>
    <p>text</p>
  </div>
  <div>
    <p> text</p>
    <p>text</p>
  </div>
</main>

＆＃13;

Answer 2

我所有的ramblings都在片段中。它使用像GCyrillus这样的弹性盒。回答，但有display:table-*属性的扭曲。它更加复杂和脆弱;如果添加了错误的东西，它可能会发生巨大变化。然而它就像一个冠军一样。

＆＃13;

/* Flex/Display-Table Layout */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
|| Using flexbox for positioning of elements and 
|| some display: table-* properties to force them
|| to behave as "table" components. So the basic
|| pattern is this:
|| If an element has children*, then make it a
|| flex container†.
|| If an element doesn't have children or it has
|| children that don't need control, make it a
|| table component with the appropriate display:
|| table-*‡ property.
*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| main.table
|| The main.table is designed to hold all of it's 
|| children: header.caption, section.row in a 
|| rigid layout in that the children are compelled
|| to adhere to it's relative position to it's
|| suroundings yet flexible because their lengths
|| are relative pecentages.
*/
// vertical flow, children are evenly separated
// from each other, and centered horizontally
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| header.caption
|| header.caption has no children (technically 
|| the text is a child textNode, but I digress),
|| so it is given display: table-row.
*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| section.row
|| section.row has children: label.cell
|| that require special positioning, so we make 
|| it a flex container. 
*/
// horizontal flow, children are separated from
// each other so that they form 2 columns.
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| label.cell
|| label.cell qualifies as a flex-container because
|| it has children, yet the space is confined and
|| it's children: input.text and div, need very 
|| litle help with positioning. 
*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| input.text and div
|| OP mentioned that the elements 'label' and
|| 'text' be adjacent to each other with no
|| space between them. Since 'label' is not a
|| sibling to 'text' but a parent, I styled their
|| borders by segments so it looks as if they are
|| siblings.
|| The div was used to position the text 'LABEL'.
|| I'm sure there's a better way to do it, but
|| it eludes me at this time.
*//*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//*Children
|| Elements within said parent element as direct 
|| descendants, not grandchildren just sons and 
|| daughters.
//†Flex Container
|| A parent element that has flex properties that
|| will control their childrens' positioning, and
|| "behavior".
//‡display: table-* Proerties
|| A group of specific values of the CSS property
|| display: 
||   table, 
||   inline-table, 
||   table-row, 
||   table-cell
|| There are more table related values, but the ones
|| mentioned above are the most useful.
*/
// http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
// http://colintoh.com/blog/display-table-anti-hero

＆＃13;

.table {
  display: flex;
  flex-flow: column nowrap;
  align-items: space-around;
  align-content: space-between;
  justify-content: center;
  width: 75vw;
  height: 75vh;
  padding: 0 1%;
  border: 4px solid black;
}
.caption {
  display: table-row;
  width: 100%;
  height: 27%;
  border: 2px solid blue;
  text-align: center;
  font-size: 3em;
}
.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 27%;
  padding: 1% 0;
  border: 0 none transparent;
}
.cell {
  display: inline-block;
  position: relative;
  width: 48%;
  height: 100%;
  border: 2px solid red;
  border-bottom: 3px solid red;
  font-size: 1.5em;
}
.cell div {
  display: table-cell;
  position: absolute;
  top: calc(50% - .5em);
  left: 5px;
  line-height: 100%;
}
.text {
  display: table-cell;
  float: right;
  height: 100%;
  width: 50%;
  padding: 0 5px;
  border: 0 none transparent;
  border-left: 1px solid green;
  border-bottom: 1px solid red;
  font-size: inherit;
}

＆＃13;

<main class="table">
  <header class="caption">HEADER</header>
  <section class="row">
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
  </section>
  <section class="row">
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
  </section>
</main>

＆＃13;

自定义单元格/边框间距

2 个答案: