きりんのきもち

Webプログラミング初心者のメモ

JavaScript、ゆくゆくはPythonも……?

HTMLのdiv要素同士の回り込みってか、折り返しさせたくない話


もともと1個目のdivで要素

<div style="float:left"></div>

だけしてて2個目の

折り返さずに1コメのdivの横に並んでてくれてたんやけど、
たぶんHTMLかCSSの仕様変更で回り込まんくなってたね……



必死こいて色々試した結果、

CSSで要素を横並びにする方法まとめ | HALAWATA.NET

こちらの方法1で落ち着きました。引用させていただくと:

<div class="boxContainer">
	<div class="box">BOX1</div>
	<div class="box">BOX2</div>
	<div class="box">BOX3</div>
</div>

に対して、CSS

.box {
	float: left;
}

.boxContainer {
	overflow: hidden;
}

/* clearfix */
.boxContainer:before,
.boxContainer:after {
    content: "";
    display: table;
}
 
.boxContainer:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.boxContainer {
    zoom: 1;
}

てな感じでOK。


同サイトの方法2とかが、ほかのサイトでも載ってたんやけど(display:inline;とか)

結局うまく行かんかったね……