如何在水平divs之间提供空间

我尝试给div给予margin，但是一个div框转到下一行。如何解决这个问题？

https://jsfiddle.net/2H25XBNA/

我想要这样的 -
https://raw.githubusercontent.com/jhu-ep-coursera/fullstack-course4/master/assignments/assignments/assignment2/images/desktop.png

<!doctype html>
<html>
<head>
	<title>assignment</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=width-device, initial-scale=1"  >
	<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;
}

我认为您错过了一些样式。添加

.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>
	<title>assignment</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=width-device, initial-scale=1"  >
	<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>

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

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

然后给出每个col

的填充

相关内容

最新更新

热门标签：