HTML和CSS对齐一行之间的div [英] HTML and CSS align divs between a line

问题描述

我很努力地创建像下图一样的html设计：
http： //s8.postimage.org/abmqqm1l1/Untitled.png

I'm struggle to create a html design like the image bellow: http://s8.postimage.org/abmqqm1l1/Untitled.png

我试过这样的事情：

 <div style="display:table-cell; width:100px;"></div><img src="" width="50px";/>
 <div style="display:table-cell; margin-left:151px; width:100px;"></div><img src="" width="50px";/>
 <div style="display:table-cell; margin-left:230px; width:100px;"></div>

我无法弄清楚，我该怎么做......请帮助

I cannot figure it out how could i do it... please help

推荐答案

我注意到在您的参考文献中，这些框的垂直位置可能会重叠。如果这不是要求，我会推荐使用1个未排序的列表元素（），并使用适当的浮点数将类左或右分配给列表项。如果垂直重叠是必须的，那么我会使用2个未排序的列表，其样式如下

I noticed that in your reference the vertical position of the boxes may overlaps. If that isn't a requirement, I would recommend using 1 unsorted list element () and assign to the list items the class "left" or "right" with appropriate "floats" . If vertical overlapping is a necessity, than I would use 2 unsorted lists with the style as follows

<ul class="left">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<ul class="right">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

，样式为：

ul {
 list-style:none;
 margin:0;
 padding:0;  
}
.left {
  float:left;
}
.right {
 float:right;
 padding-left:50px;
 border-left:1px solid black;
}
li {
 padding:10px 20px;
 border:1px solid black;
 width:100px;
 margin:5px;
 display:block;
 position:relative;
}
li:after {
 content:"";
 position:absolute;
 width:50px;
 height:1px;
 background:black;
 top:50%;
}

.left li:after {
 left:100%;
}
.right li:after {
 right:100%;
}

这篇关于HTML和CSS对齐一行之间的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！