가로 div 사이에 간격을 두는 방법은 무엇입니까?

-2

div에 대해 margin을 지정하려고 시도했지만 하나의 div 상자는 다음 줄로 이동합니다. 어떻게 해결할 수 있을까요? 768px 경계가 사라 아래 화면 픽셀을 갈 때가로 div 사이에 간격을 두는 방법은 무엇입니까?

https://jsfiddle.net/2h25xbna/

나는 또한 this-
https://raw.githubusercontent.com/jhu-ep-coursera/fullstack-course4/master/assignments/assignment2/images/desktop.png

<!doctype html> 
 
<html> 
 
<head> 
 
\t <title>assignment</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=width-device, initial-scale=1" > 
 
\t <link rel="stylesheet" href="css/style.css"> 
 
</head> 
 
<body> 
 
<h1>Trending Languages</h1> 
 
<div class="row"> 
 
    <div class="col-lg-4 col-md-6" ><p id="py">python</p><br><p>The computing industry progresses in two mostly independent cycles: financial and product cycles. There has been a lot of handwringing lately about where we are in the financial cycle. Financial markets get a lot of attention. </p></div> 
 

 
    <div class="col-lg-4 col-md-6 "><p id="js">Javascript</p><br><p>The computing industry progresses in two mostly independent cycles: financial and product cycles. There has been a lot of handwringing lately about where we are in the financial cycle. Financial markets get a lot of attention.</p></div> 
 
    <div class="col-lg-4 col-md-12" ><p id="ru">ruby</p><br><p>The computing industry progresses in two mostly independent cycles: financial and product cycles. There has been a lot of handwringing lately about where we are in the financial cycle. Financial markets get a lot of attention. </p></div> 
 
</div> 
 

 

 
</body> 
 
</html>

처럼 원하는 이유는 무엇입니까? 그것을 해결하는 방법. 상자 안의 가장 오른쪽 텍스트에 테두리를주고 싶습니다. 나는 id를 사용하여주는 것을 시도했지만 작동하지 않았다. 이

.row { 
    display:flex; 
    // your extra css 
}

같은

#py{ 
     background-color: #ff9999; 
     float: right; 
     clear: left; 
     position: relative; 
     top: -15px 
     border-style: solid; 
     border-color: black; 
     border: 2px; 
}

출처

2016-12-25 Kajal Waldiya

당신은 당신의 HTML은 너무 보일 수 있는가? – Jay

당신도 완전한 CSS 코드를 추가해야합니다 –

당신은 파이썬과 자바 스크립트 div 사이에 공백을 원하십니까? – gskema

사용 display:flex; 또는 display:inline-block;는 그럼 난 당신이 어떤 스타일을 놓친 생각 각 col

출처

2016-12-25 10:45:07

패딩을 제공합니다. 스타일 시트의 IT 작업의 좋소에

.row{ 
    display:flex; 
    } 
.col-lg-4{ 
    margin:10px; 
    border:2px solid #000; 
    }

를 추가 아래의 조각을 추가했다.

.rw{ 
 
    display:flex; 
 
    justify-content: space-around; 
 
    } 
 
.col{ 
 
    background-color: gray; 
 
    margin:10px; 
 
    border:2px solid #000; 
 
    } 
 
.title { 
 
    background-color: #ff9999; 
 
    float: right; 
 
    clear: left; 
 
    position: relative; 
 
    top: -18px; 
 
    border: 2px solid black; 
 
    right: -2px; 
 
} 
 
#js{ 
 
    background-color: #cc0000; 
 
    color: white; 
 
} 
 
#ru{ 
 
    background-color: #ff9966; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
\t <title>assignment</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=width-device, initial-scale=1" > 
 
\t <link rel="stylesheet" href="test.css"> 
 
</head> 
 
<body> 
 
<h1>Trending Languages</h1> 
 
<div class="rw"> 
 
    <div class="col" ><p id="py" class="title">python</p><br><p>The computing industry progresses in two mostly independent cycles: financial and product cycles. There has been a lot of handwringing lately about where we are in the financial cycle. Financial markets get a lot of attention. </p></div> 
 

 
    <div class="col "><p id="js" class="title">Javascript</p><br><p>The computing industry progresses in two mostly independent cycles: financial and product cycles. There has been a lot of handwringing lately about where we are in the financial cycle. Financial markets get a lot of attention.</p></div> 
 
    <div class="col" ><p id="ru" class="title">ruby</p><br><p>The computing industry progresses in two mostly independent cycles: financial and product cycles. There has been a lot of handwringing lately about where we are in the financial cycle. Financial markets get a lot of attention. </p></div> 
 
</div> 
 

 

 
</body> 
 
</html>

출처

2016-12-25 12:36:21

감사하지만이 스타일을 적용한 후에 미디어 쿼리가 작동하지 않는 것 같습니다. –

그게 내가 당신의 완전한 CSS 코드를 묻는 이유입니다, 당신은 또한 미디어 쿼리 부분을 추가해야합니다 –

나는 질문에 링크를 제공했습니다. –

가로 div 사이에 간격을 두는 방법은 무엇입니까?

답변

관련 문제