동일한 줄에서 2 divs 위치

첫 번째 사이트를 레이아웃하려고하는데 같은 줄에 두 개의 div를 배치해야합니다. 달성하려고하는 레이아웃을 보여주는 아래 이미지를 게시했습니다. 동일한 줄에서 2 divs 위치

이

내가 순간에이 div의에 대해 가지고있는 코드입니다.

<div class="full-width"> 
    <div class="logo"> 
     <img src="img/logo.png"/> 
    </div> 
    <div class="social"> 
     <ul class="social-icons"> 
     <li><img src="img/facebookSS.png"/></li> 
     <li><img src="img/twitter.png"/></li> 
     <li><img src="img/instagramSS.png"/></li> 
     </ul> 
    </div> 
    <div class="address"> 
    <p>Address to go here</p> 
    </div> 
    </div>

나는 CSS를 가지고 놀고 있었지만 조금 옳았습니다.

내가하고 싶은 일은 위의 행에있는 nav을 사용하여 위의 모든 행을 하나의 행에 두는 것입니다. 희망은 그 말이 맞습니다. 부트 스트랩과 같은 프레임 워크를 사용하지 않으므로 내 수업 만 사용하면됩니다.

* { 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box; 
} 

    body { 
    font-size: 20px; 
    font-family: 'Open Sans', sans-serif; 
    color: #fff; 
    position: relative; 
} 

.logo { 
    width: 300px; 
    height: auto; 
    position: relative; 
    display: inline-block; 
} 

.logo img { 
    width: 100%; 
    height: auto; 
} 

.social { 
    display: inline-block; 
    float: right; 
    margin-right: 20%; 
} 

.social li { 
    display: inline-block; 
} 

.social li img { 
    width: 50px; 
    height: auto; 
} 

.full-width { 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
}

출처

2016-09-09 rufus

주위에 놀았 던 CSS를 게시하는 방법 – rlemon

일반적으로 div는 기본적으로 전체 줄을 차지합니다. 이것이 그들이 설계된 방법입니다. –

물론 그 wouldnt, 도움이 될 것입니다 거기에 잘못 여기 있습니다 원래 게시물에 추가했습니다 – rufus

div에 대해 더 많은 컨테이너를 만들어야합니다. 다음은 설명 할 수있는 아주 기본적인 예입니다.

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="test.css"> 
    <title></title> 
</head> 
<body> 



<div class="container"> 
    <div id="one"></div> 
    <div id="two"> 
     <div id="three"></div> 
     <div id="four"></div> 
    </div> 
</div> 
</body> 
</html>

컨테이너 클래스는 페이지의 전체 너비를 차지하고 네비게이션 막대 위에있는 모든 것을 포함합니다. Div 1은 귀하의 로고가 될 것입니다. div 2는 div 2의 높이의 일정 비율을 차지하는 div (3와 4)를 더 넣을 수있는 또 다른 컨테이너입니다. 이 div 중 하나의 내부보다, 당신은 당신의 사회적 로고와 주소를 다음에 적어야합니다. CSS는 다음과 같습니다.

* { 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box; 
} 

.container { 
    width: 100%; 
} 

#one { 
    height: 300px; 
    width: 300px; 
    background-color: green; 
    float: left; 
    margin-left: 25%; 
} 

#two { 
    height: 300px; 
    width: 500px; 
    float: left; 
    margin-left: 10%; 
} 

#three { 
    height: 30%; 
    width: 100%; 
    background-color: yellow; 
} 

#four { 
    height: 70%; 
    width: 100%; 
    background-color: blue; 
}

이것은 아주 기본적인 예제 일뿐 아이디어 아이디어로 사용됩니다. 분명히 치즈 배경 색상을 제거하고

출처

2016-09-09 18:38:47

대단히 감사합니다. 거의 완벽하게 보이는 것 같습니다. 유일한 것은 div 1 '로고'를 페이지 중앙에 배치해야합니다. 계속 놀고 내가 해결할 수 있는지 알아봐. – rufus

업데이트 수정 :

난 당신이 margin:auto;와 그 안에 아무것도 중앙 할 수있는 정의 폭을 가지고있는 클래스 .top와 사업부를 만들었습니다. 나는 당신의 소셜 아이콘 주위에 섹션을 만들고 그것을 바로 떠 다녔습니다. 여기에 로고가 중앙에 있기 때문에 이것은 이전 예보다 더 좋은 예입니다.

나는이 도움이 되었으면 좋겠 : 모든 조언을 https://jsfiddle.net/0sptpx0j/3/

출처

2016-09-09 18:39:37

안녕들 덕분에, 난 그 길을 갈 절대 위치에 대한 책을 읽은 후 결정했다. 이것이 내가 생각해내는 것입니다.

<div class="full-width"> 
    <div class="logo"> 
    <img src="img/logo.png"/> 
    </div> 
    <div class="social"> 
    <div class="social-list"> 
     <ul class="icons"> 
     <li><img src="img/facebookSS.png"/></li> 
     <li><img src="img/twitterSS.png"/></li> 
     <li><img src="img/instagramSS.png"/></li> 
     </ul> 
    </div> 
    <div class="address"> 
     <p>Address goes in here</p> 
    </div> 
    </div> 
</div> 


.logo { 
    width: 300px; 
    height: auto; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

.logo img{ 
    width: 100%; 
    height: auto; 
} 

.social { 
    float: right; 
    width: 300px; 

} 

.social-list { 
    width: 100%; 
} 

.icons { 
    list-style: none; 
    padding: 0; 
} 

.icons li { 
    display: inline-block; 
    margin-right: 10px; 

} 
.icons img { 
    width: 50px; 
    height: auto; 
} 

.full-width { 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
}

출처

2016-09-10 08:29:45 rufus

동일한 줄에서 2 divs 위치

답변

관련 문제