如何給橫向div之間的空間？

-2

我試着給margindiv，但是一個div框轉到下一行。如何解決這個問題？如何給橫向div之間的空間？

我希望它像這個 -
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>

而且當屏幕像素低於768px邊界消失了，爲什麼呢？如何解決這個問題。我還想給框中的最右邊的文本添加邊框。我嘗試使用ID，但它沒有奏效。

#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代碼 –

你的意思是你想在python和javascript div之間使用空格嗎？ – gskema

使用display:flex;或display:inline-block;這樣

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

然後給填充每個col

來源

2016-12-25 10:45:07

我想你已經錯過了一些風格。添加

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

到您的樣式表是工作的fine.I'm添加下面的代碼片段。

.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之間的空間？

回答

相關問題