[問題] CSS 的一個問題解法

作者: ggirls (哥)   2018-01-19 00:37:37
<div class="o">ooooo</div>
<div class="a">aaaaa</div>
<div class="b">bbbbb</div>
<div class="a">aaaaa</div>
<div class="b">bbbbb</div>
我有一個有上面模式的 html。現在想把 aaaaa 和 bbbbb 連接不換行,
也就是大約是
ooooo
aaaaabbbbb
aaaaabbbbb
只透過 css 來控制,不知道怎麼做?
透過 inline, block 好像湊不出這個規律。
問題的原型:
其實原本每個</div>後面都接了個<br>。我本來是 span br {display:none}
但後來發現會影響到別的地方,這樣還有其他解法嗎?
<span>
<div class="a">aaaaa</div><br>
<div class="b">bbbbb</div><br>
<div class="a">aaaaa</div><br>
<div class="b">bbbbb</div><br>
</span>
作者: jhnny97 (≡(  ゚Д゚))   2018-01-19 02:01:00
外面再用一個div包起來,並用white-space:nowrap;
作者: williewillie (GodDamnIsInTheDetail)   2018-01-19 03:02:00
作者: satanbaby (撒旦北鼻)   2018-01-19 04:45:00
我原本想的很複雜 結果看完w大感覺被污辱
作者: ggirls (哥)   2018-01-19 09:58:00
看到w大的答案:「我到底看了什麼?!」@willie 我加了個「問題的原型」。後面接了<br>還有救嗎?
作者: ninetyeight (98NINETYEIGHT)   2018-01-19 10:29:00
.a~br{display:none;}
作者: imhaha (嘿嘿)   2018-01-19 12:43:00
突然頓悟了
作者: ggirls (哥)   2018-01-19 13:24:00
受益良多。
作者: williewillie (GodDamnIsInTheDetail)   2018-01-19 20:41:00
為什麼感覺被我侮辱????http://jsbin.com/muhexuxoha/edit?output
作者: nottt (無)   2018-01-20 13:12:00
應該是覺得w大答案簡潔有力,自嘆不如吧
作者: jayxxx (jayxxx)   2018-01-21 15:54:00
1樓大那個寫法p以外的可以用嗎?沒用過好奇問
作者: emmayday (艾比)   2018-02-03 03:10:00
可是br不是就換行了

Links booklink

Contact Us: admin [ a t ] ucptt.com