동일한 행에 두 개의 <div>...</div>을 만드는 방법은 무엇입니까?

10

모든 div에 사용해보십시오.

display:inline-block;

출처

2010-12-02 23:53:02

+0

+1 표시 : 인라인은 충분히 유연하지 않고 수레가 지저분합니다! –

2

는 CSS로 플로트

:


<div class="container1"></div> 
<div class="container2"></div> 
<div class="clear"></div>

CSS는


.clear { clear: both; } 
.container1, .container2 { float: left; }

당신은 부동 소수점을 취소해야합니다 .. 그래서 사용

HTML :

float: left

출처

2010-12-02 23:12:30 simshaun

1

그들을 떠 확인 두 가지 모두 지우기 :

출처

2010-12-02 23:14:53

9

단순함 : <span>을 대신 사용하십시오..

<div> 기본적으로 display: block이 있습니다. 즉, 다음 요소가 새 줄에 있음을 의미합니다.

display: inline으로 변경하여 원하는 동작을 얻을 수 있습니다. 그러나 인라인 <div>은 단지 <span>입니다.

출처

2010-12-02 23:18:01

1

플로트가 페이지 센터 정렬을 엉망으로 만듭니다. 여기에 내가 가진 것이 있는데, 나는 페이지 중심을 잃지 않고 같은 행에 2와 3을 가져 가고 싶다. 브라우저의 크기를 조정할 때 플로트가 함께 움직이기 때문에 플로트가 작동하지 않습니다.

<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<style type="text/css"> 
.div1 { 
    background: #faa; 
    width: 500; 
} 

.div2 { 
    background: #ffc; 
    width: 400; 
    margin-right: 100px; 
} 
.div3 { 
    background: #cfc; 
    width: 100; 
    margin-left: 400px; 

} 


</style> 
</head> 

<html> 
<body> 
<center> 

<div class="div1"> This is no 1</div> 
<div class="div2"> This is no 2</div> 
<div class="div3"> This is no 3</div> 

</center> 
</body> 
</html>

출처

2014-02-10 04:35:18

2

div 컨테이너를 사용하고 모든 div를 넣습니다.

.div_container{ 
    display: flex; 
    flex-direction: row; 
}

매우 간단합니다!

출처

2017-11-14 17:54:49 Abraxas

동일한 행에 두 개의 <div>...</div>을 만드는 방법은 무엇입니까?

답변

관련 문제