4
我在屏幕左側的div中有一個編號列表。就在那個div的右邊,我有另一個div,其中有與編號列表相對應的項目。當屏幕最小化以便第一行中的文本換行到第二行時,我希望編號列表中的2移動到第三行以匹配第二項條目。文本被包裝時水平對齊多個div的項目
我已經嘗試了幾個不同的東西(使用實際編號的列表,使用單個div等),並沒有得到任何工作。使用單獨的div是最有意義的,但我想要在左側的單獨欄中的編號列表。這可以在鏈接的小提琴中看到。任何幫助表示讚賞!
- 下面是它未被包裝時的視圖。
1 First Item 2 Second Item
- 下面是包裹時,它目前如何看待。
- 下面是我想如何查看包裹時。
1 First 2 Item Second Item
1 First Item 2 Second Item
下面是代碼:
<div class="xml-block">
<div id="xml-sidebar">
<p class="xml-number">1</p>
<p class="xml-number">2</p>
</div>
<div id="xml-group">
<p class="xml-symbol xml-list">Position of the first entry.</p>
<p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p>
</div>
在下面的示例中,當窗口是足夠的文字環繞小,從該列表中,2是不調整留在第二項。