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：JSFiddleExampleの使用を検討してください。

最初は混乱しているように見えるかもしれませんが、一度試してみると、新しいブランチを追加するのは非常に簡単です。また、絶対測位を使用する際の複雑さの多くが解消されます。

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

まず、ペイントなどの写真デザインプログラムで線を描画し、線の画像をドキュメントに配置して配置する必要があります。次に、各divにとを追加し、position:absolute;上下top: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

配置された要素をより自由に配置したい場合は、positionプロパティを使用してコンテナを作成し、その中にdivを上、左、下、右のプロパティで配置します。

于 2012-11-28T20:57:03.393 に答える
0

それがあなたを喜ばせるかどうか見てください、ただあなたの画像の場所で画像を置き換えてください

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

あなたの解決策はposition:absolute;

于 2012-11-28T21:03:36.677 に答える