需要构建这样的结构
我尝试了border-spacing
但显然它已应用于所有单元格。是否可以删除标签和文本单元格之间的空间?或者我应该在整个结构中使用div?获得这种结构的正确方法/做法是什么?
编辑:谢谢大家的建议,你们真棒。我会记住只使用表格作为表格。现在我决定尝试GCyrillus的解决方案。
答案 0 :(得分:0)
* {
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 */
}

<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;
答案 1 :(得分:0)
我所有的ramblings都在片段中。它使用像GCyrillus这样的弹性盒。回答,但有display:table-*
属性的扭曲。它更加复杂和脆弱;如果添加了错误的东西,它可能会发生巨大变化。然而它就像一个冠军一样。
/* 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;