我怎样才能解决空间问题?

时间:2017-04-24 02:53:48

标签: html css

我不是很擅长编程,但我正在为朋友制作一个网站 而且我的元素下的空格有问题,比如这个印刷品:

1- http://prntscr.com/f02fan

2- http://prntscr.com/f02ff8

我认为这个空格是存在的,因为我正在使用CSS的命令来调整这样的元素:

position: relative;
bottom: 3889px;
left: 1055px;
<a href="Resina_Llis.html" class="button style1" style="position: relative; bottom: 3889px; left: 1055px;">Ver detalhes</a>

如果有人有更好的方法来删除这些空格,请告诉我。谢谢

1 个答案:

答案 0 :(得分:0)

更好的方法,使用display: flex;。请注意,不支持IE浏览器早于IE11。 http://caniuse.com/#feat=flexbox

&#13;
&#13;
.row {
  display: flex; /* equal height of the children */
}
.col {
  flex: 1; /* additionally, equal width */
  padding: 1em;
  border: 1px solid gray;
}
&#13;
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
&#13;
&#13;
&#13;

将两个div项并排放置的一个非常简单的示例。

&#13;
&#13;
ul {
  margin: 0;
  /* removing the default ul margin */
  padding: 0;
  /* removing the default ul padding */
  text-align: center;
}

li {
  display: inline-block;
  width: 45%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: yellow;
}
&#13;
<ul>
  <li class="left half">foo</li>
  <li class="right half">bar</li>
</ul>
&#13;
&#13;
&#13;