Question

我很难创建像下图这样的html设计： 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>

我无法弄清楚我怎么能这样做...请帮忙

Answer 1

考虑使用table：JS Fiddle Example。

虽然一开始可能会让人感到困惑但是一旦你尝试了它，添加新的分支就会非常简单。它消除了使用绝对定位的大部分复杂性。

<强> HTML

<table>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td style="border-right: 3px solid black;"></td>
</tr>
<tr>
    <td></td>
    <td style="border-top: 3px solid black; border-left: 3px solid black;"></td>
    <td style="border-top: 3px solid black; border-right: 3px solid black;"></td>
    <td style="border-bottom: 3px solid black;"></td>
    <td style="border-bottom: 3px solid black; border-right: 3px solid black;"></td>
</tr>
<tr>
    <td></td>
    <td style="border-bottom: 3px solid black; border-left: 3px solid black;"></td>
    <td style="border-bottom: 3px solid black; border-right: 3px solid black;"></td>
    <td></td>
    <td style="border-right: 3px solid black;"></td>
    <td style="border-bottom: 3px solid black;"></td>
    <td style="border-top: 3px solid black; border-left: 3px solid black;"></td>
    <td style="border-top: 3px solid black; border-left: 3px solid black;"></td>
    <td style="border-top: 3px solid black; border-right: 3px solid black;"></td>
</tr>

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td style="border-right: 3px solid black;"></td>
    <td></td>
    <td></td>
    <td style="border-bottom: 3px solid black; border-left: 3px solid black;"></td>
    <td style="border-bottom: 3px solid black; border-right: 3px solid black;"></td>
</tr>
</table>

Answer 2

我注意到在你的参考文献中，盒子的垂直位置可能会重叠。如果这不是一个要求，我建议使用1个未排序的列表元素（）并使用适当的“浮点数”为列表项分配“左”或“右”。如果垂直重叠是必要的，那么我将使用2个未分类的列表，其格式如下

<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%;
}

Answer 3

如果您希望定位元素更自由地创建具有position属性的容器，然后在其中按顶部，左侧，底部，右侧属性定位div。

Answer 4

首先，你必须在照片设计程序中绘制线条，比如绘画，然后将线条图像放在文档中并定位它。然后为每个div添加position:absolute;和top:value; left:value;并更改顶部和左侧值可以将每个div定位在其真实位置。

例如：

<div style="display:table-cell; width:100px; position:absolute; top:100px; left:200px;">

Answer 5

看看是否请你，只需用你的图片位置替换imgaes

     [http://jsfiddle.net/ZMzyZ/]

您的解决方案是position:absolute;

HTML和CSS在一行之间对齐div

5 个答案: