2

我很难创建如下图所示的 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>

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

4

5 回答 5

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>​
于 2012-11-28T21:11:03.027 回答
0

首先，您必须在照片设计程序（如paint）中绘制线条并将线条图像放入文档中并定位它。然后通过为每个div添加一个position:absolute;andtop:value; left:value;并更改顶部和左侧的值，您可以将每个div定位在其真实位置.

例如：

<div style="display:table-cell; width:100px; position:absolute; top:100px; left:200px;">
于 2012-11-28T20:58:21.883 回答
0

我注意到在您的参考中，框的垂直位置可能重叠。如果这不是必需的，我建议使用 1 个未排序的列表元素 () 并使用适当的 "floats" 为列表项分配 "left" 或 "right" 类。如果垂直重叠是必要的，那么我将使用 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%;
}
于 2012-11-28T20:56:45.343 回答
0

如果您希望定位元素更自由地创建具有位置属性的容器，然后通过其内部的顶部、左侧、底部、右侧属性定位 div。

于 2012-11-28T20:57:03.393 回答
0

看看你是否满意，只需用你的图像位置替换 imgaes

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

你的解决方案是position:absolute;

于 2012-11-28T21:03:36.677 回答