代码之家 › 专栏 › 技术社区 › Toniq

2个流体块元件并排共享空间

responsive-design css html

0

Toniq · 技术社区 · 8 年前

我有两个保存文本的元素,都是未知宽度,我不想添加固定宽度来复制div。我如何让它们漂浮在一条线上,并始终占据100%的宽度?(无表格)

 .data{
   max-width:400px;
 }

.code {
  color: #fff;
  margin: 0;
  padding: 8px!important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
  float: left;
}

.copy {
  color: #ccc;
  display: inline-block;
  padding: 3px!important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
  float: right;
  margin-top: 1px;
}

<div class="data">
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
  <div class="copy">COPY</div>
</div>

2 回复 | 直到 8 年前

1

VXp Kadir BuÅ¡atliÄ 8 年前

你可以用 柔性箱 :

.data {
  display: flex; /* displays flex-items (children) inline by default */
  align-items: flex-start; /* vertical alignment / optional but recommended / if you don't want that flex-items match in height, which by default they do (default value of stretch, which makes them fill the flex-containers height and where the height of all items is dictated by the height of the "tallest" one) / you can also try the value of center */
  max-width: 400px;
}

.code {
  color: #fff;
  margin: 0;
  padding: 8px !important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
  /*float: left; not necessary*/
}

.copy {
  color: #ccc;
  /*display: inline-block; not necessary*/
  padding: 3px !important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
  /*float: right; not necessary*/
  margin-left: 10px; /* design purposes */
}

<div class="data">
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
  <div class="copy">COPY</div>
</div>

2

0

Duke 8 年前

可以使用灵活的方框来处理此问题。只需添加 display:flex 在您的 .data . 欲了解更多信息,请阅读 here

 .data{
   max-width:400px;
   display:flex;
 }

.code {
  color: #fff;
  margin: 0;
  padding: 8px!important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
  float: left;
}

.copy {
  color: #ccc;
  display: inline-block;
  padding: 3px!important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
  float: right;
  margin-top: 1px;
}

<div class="data">
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
  <div class="copy">COPY</div>
</div>