-2

キューブの見出しを付けるために、キューブの外側にpタグを付けてテキストを書きました。

テキストが落ちたのでタグを付けclear:leftました。p

他のキューブもそのせいで倒れました。

立方体を1行で水平に配置するにはどうすればよいですか？

以下に私のフィドルを提供する

http://jsfiddle.net/NmPFU/2/

<div class="melonhtml5_gallery">
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png">testing</div>
                        <p style='clear: left; text-align:left;'>rajkumar</p>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/search.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/shareFiles.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='/Customer/index/?step=create' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' href='/Customer/' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/custProfile.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/custQuote.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='/Sales/order/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a href='/Sales/' style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/salesOrders.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/vendorProfile.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/reports.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/admin.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/shipLogistic.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/accReceivable.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/custRMA.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/production.png"></div>
                        <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/CRM.png"></div>
                    </div>
4

1 に答える 1

0

そのタグを囲むためにDivを使用したいと思うかもしれませんが、それ<p>を試しましたか？

編集

これが私がしたことです

  1. clear:leftからスタイルを削除<p>

  2. <br/>の前に4を追加<p>

  3. margin-top:100px `にスタイルを追加

これが個人的な結果です。すべてのコードが少し乱雑で、少し読みづらかったと思います。しかし、私はそのように甘やかされています。

http://jsfiddle.net/8CtGE/

フィドルで編集タグ <p>をタグ<div class="melonhtml5_gallery">

テストという単語が含まれているキューブは、それほどキューブではないため、間隔がずれています。これは、Cubes自体のコードで対処する必要があるもののように見えます。

http://jsfiddle.net/8CtGE/1/

そうでなければ、それはあなたが今望むようです。

最後の編集

あなたは本当にあなたの質問を明確にする必要があります。

http://jsfiddle.net/8CtGE/3/のように、そのセクションのすべてのキューブに単一の見出しが必要です か？その場合は、キューブで行っていることと同じくらい複雑なことに取り組む前に、HTMLとCSSの基本から始める必要があります。私が失礼に聞こえないことを願っていますが、誰かが私がしたことは基本的なHTML/CSS編集であるとあなたに言う必要があります

于 2013-02-04T22:13:27.963 に答える