어떻게 두 개의 div를 한 줄에 두는 문제를 해결합니까

1580 단어 html
방법 하나, 만약 두 개의 div가 모두 width를 모른다면 앞의 float:left, 뒤의 하나는 마지막을 막론하고 하나의clear의div로 끝낼 것이다. 그러나 두 개의 div의 위치는 겹치고 내용은 겹치지 않는다.

<div style=”position:absolute;left:200px;height:1000px;width:300px;display:inline;”>
<div style=”float:left;position:relative;width:100px;background:#990022; “>
afafdadfas, ssssssssssss
</div>
<div style=”white-space:normal;background:#9ff022;”>
afsafasasd fsaf dfs fdas asfdsa ad afdfasdffffaaaaaaaaaaaaaaaaaaaaaaaaadasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<!–
<div style=”font-size:0px; line-height:0px; clear:both;”>
</div>
–>
</div>

방법2, 오른쪽div가width를 알면 둘 다float:left를 사용하면 돼요. 내용과 위치가 겹치지 않고 두 개의div가 같은 줄에 있어요.

<div style=”position:absolute;left:200px;top:300px;height:1000px;width:300px;display:inline;”>
<div style=”float:left;position:relative;width:100px;background:#990022; “>
afafdadfas, ssssssssssss
</div>
<div style=”white-space:normal;float:left;background:#9ff022;width:100px;”>
afsafasasd fsaf dfs fdas asfdsa ad afdfasdffffaaaaaaaaaaaaaaaaaaaaaaaaadasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<div style=”font-size:0px; line-height:0px; clear:both;”>
</div>
</div>

방법3, 오른쪽div의 top를 마이너스로 설정하고left는 왼쪽div의 너비보다 크므로 왼쪽div의 width를 알아야 합니다. 추천하지 않습니다.

좋은 웹페이지 즐겨찾기