div 요소를 인라인으로 표시하는 방법은 무엇입니까?
https://stackoverflow.com/questions/224602
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
이 HTML을 감안할 때 :
<div>foo</div><div>bar</div><div>baz</div>
어떻게 다음과 같이 인라인을 표시하게합니까?
Foo Bar Baz
이건 아니야:
foo
술집
바즈
해결책
그때는 다른 것입니다.
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 꼬리표.
Darryl에게 사과합니다. 클래스 = "인라인"AS Style = "display : inline"을 읽습니다. 의미 적으로 의심스러운 클래스 이름을 사용하더라도 정답이 있습니다 ;-)
미스 사용 br 텍스트 레이아웃보다는 구조적 레이아웃을 제공하는 것은 내가 좋아하는 데 너무 널리 퍼져 있습니다.
그 안에 인라인 요소 이상을 넣고 싶다면 divs 그러면 당신은 그것들을 떠나야합니다 div그것들을 인라인으로 만드는 대신.
부유 한 divs :
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
인라인 divs :
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
당신이 전자를 쫓고 있다면, 이것은 당신의 해결책이고 그것들을 잃는다 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>
이 divs의 너비는 유동적이므로 동작을 제어하려면 폭을 자유롭게 넣으십시오.
고마워, 스티브
사용 display:inline-block IE6/7에 대한 마진과 미디어 쿼리 :
<html>
<head>
<style>
div { display:inline-block; }
/* IE6-7 */
@media,
{
div { display: inline; margin-right:10px; }
}
</style>
</head>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</html>
당신은 사용해야합니다
<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;
}
언급 한 바와 같이, 디스플레이 : 인라인은 아마도 당신이 원하는 것일 것입니다. 일부 브라우저는 또한 인라인 블록을 지원합니다.
"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>
괜찮습니다 :
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
<span> ?
나는 스팬을 사용하거나 왼쪽을 떠날 것입니다. 플로팅의 유일한 문제는 나중에 플로트를 지워야한다는 것입니다.
나는 사람들이 이것이 끔찍한 아이디어라고 말하지만, 그 아래에 댓글이 달린 타일 이미지와 같은 일을하고 싶다면 실제로 유용 할 수 있습니다. 예를 들어 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;
}
참고 : Border-Radius 속성은 선택 사항이며 CSS3 호환 브라우저에서만 작동합니다.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
divs 'foo' 'bar'와 'baz'는 각각 'contain'div 내에서 유지됩니다.
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
CSS를 사용하지 않고이 방법을 사용할 수 있다고 생각합니다.
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
지금은 원치 않는 결과를 얻는 방식으로 블록 레벨 요소를 사용하고 있습니다. 그래서 당신은 span, small 등과 같은 요소를 인라인 할 수 있습니다.
<span>foo</span><span>bar</span><span>baz</span>
우리는 이것을처럼 할 수 있습니다
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</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 */
나는 단지 고정 너비를 만드는 경향이 있으므로 페이지의 총 너비에 더해집니다. 아마도 고정 너비 페이지를 사용하는 경우에만 작동합니다. 또한 "플로트".
