답변:
그것은 다른 것입니다 :
div.inline { float:left; }
.clearBoth { clear:both; }<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->인라인 div는 웹의 괴물이며 스팬이 될 때까지 구타해야합니다 (10에서 9 번 이상).
<span>foo</span>
<span>bar</span>
<span>baz</span>
... 원래 질문에 대답합니다 ...
다음과 같이 작성하십시오.
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>이 질문과 답변을 두 번 읽은 후에는 편집 작업이 많이 진행되었다고 가정하고 충분한 정보를 제공하지 않아서 잘못된 답변을 받았다고 생각합니다. 내 단서는 br태그 사용에서 비롯됩니다 .
대릴에게 사과드립니다. class = "inline"을 style = "display : inline"으로 읽습니다. 의미 론적으로 의심스러운 클래스 이름을 사용하더라도 정답이 있습니다. ;-)
br텍스트 레이아웃이 아닌 구조적 레이아웃을 제공하기 위해 잘못 사용하는 것은 내가 좋아하는 것보다 너무 널리 퍼졌습니다.
인라인 요소보다 더 많은 요소를 넣으려면 인라인으로 만드는 대신 divs플로팅해야합니다 div.
플로팅 된 div :
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
인라인 div :
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
전자를 따른다면 이것이 해결책이며 br태그를 잃어 버립니다 .
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
이 div의 너비는 유동적이므로 동작을 제어하려면 자유롭게 너비를 지정하십시오.
고마워, 스티브
올바른 인라인 방법
<span>대신에 사용해야 합니다 . div는 블록 레벨 요소이므로 인라인 블록 레벨 요소가 필요합니다.<div>
요구 사항에 따라 html 코드는 다음과 같습니다.
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
display:inline-block;float:left;표시 속성을 display:inline-block;강제 로 변경했습니다
예 하나
div {
display: inline-block;
}
예 2
div {
float: left;
}
플로트를 지워야합니다
.main-div:after {
content: "";
clear: both;
display: table;
}
언급했듯이 display : inline은 아마도 당신이 원하는 것입니다. 일부 브라우저는 인라인 블록도 지원합니다.
"float : left"와 함께 래퍼 div를 사용하고 float : left도 포함하는 상자를 넣으십시오.
CSS :
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}HTML :
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>사람들은 이것이 끔찍한 아이디어라고 말하지만 실제로 주석이 달린 타일 이미지와 같은 것을하고 싶다면 실제로 유용 할 수 있습니다. 예를 들어 Picasaweb은이를 사용하여 앨범에 축소판을 표시합니다.
예를 들어 / 데모 http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (클래스 goog-inline-block; 여기에서 ib로 약칭합니다)을 참조하십시오.
/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }CSS가 주어지면 div를 클래스 ib로 설정하면 마술처럼 인라인 블록 요소가됩니다.
세 개의 div를 포함해야합니다. 예를 들면 다음과 같습니다.
CSS
div.contain
{
margin:3%;
border: none;
height: auto;
width: auto;
float: left;
}
div.contain div
{
display:inline;
width:200px;
height:300px;
padding: 15px;
margin: auto;
border:1px solid red;
background-color:#fffff7;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}참고 : 경계 반경 속성은 선택 사항이며 CSS3 호환 브라우저에서만 작동합니다.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>div 'foo' 'bar'및 'baz'는 각각 'contain'div 내에 유지됩니다.
<div class="cdiv">
<div class="inline"><p>para 1</p></div>
<div class="inline">
<p>para 1</p>
<span>para 2</span>
<h1>para 3</h1>
</div>
<div class="inline"><p>para 1</p></div><div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
#div01, #div02, #div03 {
float:left;
width:2%;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
//solution 2
<style>
#div01, #div02, #div03 {
display:inline;
padding-left:5px;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
/* I think this would help but if you have any other thoughts just let me knw kk */