我正在尝试创建一个由键值对组成的列表,其中键位于左侧,值位于右侧,另一个位于另一侧.

Authors          John Doe
                 Jane Doe
                 Max Mustermann

Publishers       Johne Doe
                 Jane Doe
                 Max Mustermann

我的问题是如何在每个dd元素之间强制换行？我知道浮动元素会很容易,但我想知道是否有可能只使用flexBox.不幸的是,根据定义,我无法将dd元素包装在自己的容器中.

dl {
  display: flex;
}

dt {
  width: 33%;
}

dd {
  margin: 0;
}

<dl>
  <dt>Authors</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

<dl>
  <dt>Publishers</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

如何在dl上设置flex-wrap并且宽度> gt; 50％的dd
还有margin-left：auto？

见下面的演示：

dl {
  display: flex;
  flex-wrap: wrap;
}
dt {
  width: 33%;
}
dd {
  margin-left: auto;
  width: 66%;
}

<dl>
  <dt>Authors</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

<dl>
  <dt>Publishers</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

遇到一些问题让我的4个灰色框全部显示在同一行.通过给每个人提供25％的宽度,他们会自动显示1/4的屏幕尺寸,无论分辨率或屏幕尺寸如何.获得前3个,但第四个下降到下一行.关于如何强制他们在同一条线上的任何想法？

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

.b1,.b2,.b3,.b4{
display:inline-block;
position: relative;
margin: 5px;
float:left;
width:25%;
height:400px;
background-color: lightgrey;

}

看一下 CSS Box Model.它们之所以不在同一条线上并排浮动,是因为你增加了一个保证金.您的内容区域的高度或宽度不考虑此边距.如果你使用了保证金以外的东西,你可以使用 box-sizing属性,但这不是最好的方法.理想情况下,你会补偿你的保证金,所以像 jsFiddle这样的东西应该让你开始.

强制性添加：宽度加起来为92％,剩下8％可以使用,所以如果你添加1％左边距和1％边距右边,则使用margin属性乘以4个项目(给你8个)所需宽度的百分比),你已经考虑了所有100％的宽度.

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

.b {
    display: inline-block;
    position: relative;
    margin: 1%;
    float: left;
    width: 23%;
    height: 400px;
    background-color: lightgrey;
}

我有这个：

<div><a href="http://domain-name.com/thislisting/"><imgsrc="http://domain-name.com/wp-

content/uploads/2013/04/dancegroup-300x300.jpg"/></a>
</div>

<div>

    <divhttps://www.jb51.cc/tag/Meta/" target="_blank">Meta"><span>march</span></div>

    <divhttps://www.jb51.cc/tag/Meta/" target="_blank">Meta"><span>10</span></div>

    <divhttps://www.jb51.cc/tag/Meta/" target="_blank">Meta"><span>northampton,Massachusetts 01060</span></div>

</div>

显示如下：

|图片…. | 3月10日马萨诸塞州北安普顿市01060
| ………….. |
| _______________ |

但我希望它显示如下：

|图片…. | 3月10日
| ………….. |北安普顿,马萨诸塞州01060
| _______________ |

所有字段都是从WP数据库条目中动态提取的.

目前,为了使它们在同一行上排列,3月字段和其他日期相关字段的css对于每个字段都是这样的：

#content .wpbdp-listing .wpbdp-field-endmonth .wpbdp-field-enddaynumber .value {
向左飘浮;
}

我的问题是,我可以申请什么css导致city-state-zip div,以及跟随它的那些,从日期信息下面的下一行开始而不是
与日期信息在同一行？

请注意,city-state-zip div后面的字段表现良好,并且都是从各自的行开始的.

我添加了float：left以将日期字段全部放在同一行而不是列中.

这些div都在另一个div中,还有更多.原样,没有我添加
向左浮动为日期元素,它们都垂直向下排列在页面上,
相继.

城市状态拉链之后的div每个都从一个新的线开始.
我想将city-state-zip元素放在一行上.

请注意清除：左侧和清除：由于这些div的左侧有一个图像并且它将城市div推到下面,所以没有解决所有问题,如下所示：

|图片…. | 3月10日
| ………….. |
| _______________ |
北安普顿,马萨诸塞州01060

使用明确：两者;在类字段值wpbdp-field-citystatezip中

我正在尝试使用flexBox来对齐2列中的文章,但不知怎的,我无法让它工作.如何使用flexBox创建2列网格？

以下示例说明了我之前尝试的内容：

.container {
    display:flex;
}

.post {
    flex:1 0 50%
}

<div>

<article>
   <header> <h1>Title</h1></header>
  <p> Vestibulum tincidunt,eros vel iaculis dictum,turpis nulla rhoncus velit,sed blandit nulla lorem sed justo. Etiam enim augue,volutpat ac faucibus eu,fermentum viverra lorem. Integer tempor ac nisi sit amet pellentesque. Sed convallis tempor augue vitae placerat. Morbi ultricies bibendum dolor,nec interdum lorem efficitur quis. Maecenas pharetra enim ut venenatis dictum. Phasellus varius lobortis ante,id blandit lectus rhoncus id. Aliquam consectetur ex nec ex volutpat,finibus dignissim sem mattis.

Nunc convallis at nunc a ultricies. Proin vulputate accumsan elit eu convallis. Curabitur porttitor dui soDales,aliquam ex ut,iaculis diam. Donec vulputate maximus eleifend. Vivamus eu purus nunc. Vivamus neque nisl,faucibus in risus vitae,consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p>
</article>
  
  <article>
   <header> <h1>Title</h1></header>
  <p> Vestibulum tincidunt,consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p>
</article>


</div>

@media screen and ( max-width: 500px ) {
    .container { flex-direction: column; }
}

我正在尝试创建一个包含6个框的FlexBox.

但是,由于某些原因,它们的行为不正确,因为它们的大小不同.

他们必须表现得像这样：

/* ================================= 
      Base Styles
    ==================================== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.row {
  flex: 1;
}
/* ================================= 
      Media Queries
    ==================================== */

@media (min-width: 769px) {
  .main-header,.main-nav,.row {
    display: flex;
  }
  .main-header {
    flex-direction: column;
    align-items: center;
  }
  .col {
    flex: 1 50%;
  }
  .row {
    flex-wrap: wrap;
  }
  .item-2 {
    order: -1;
  }
}
@media (min-width: 1025px) {
  .main-header {
    flex-direction: row;
    justify-content: space-between;
  }
  .col {
    flex-basis: 0;
  }
  .item-1 {
    flex-grow: 1.4;
  }
}

<div>

  <div>
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.primary-->

  <div>
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.secondary-->

  <div>
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.tertiary-->

  <div>
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.tertiary-->

  <div>
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.tertiary-->

  <div>
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.tertiary-->

</div>

你可以在这里查看JSfiddle：https://jsfiddle.net/ju157mnj/2/

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.col {
   flex: 0 0 calc(33.33% - 30px);   /* flex-basis adjustment for margin */
   margin: 5px;
}

img { 
    width: 100%;
}

<div>

    <div>
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.primary-->

    <div>
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.secondary-->

    <div>
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.tertiary-->

    <div>
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.tertiary-->

    <div>
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.tertiary-->

    <div>
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.tertiary-->

</div>

Revised Fiddle