Question

我尝试为margin提供div，但是div框会转到下一行。怎么解决？

我想要这样 -
https://raw.githubusercontent.com/jhu-ep-coursera/fullstack-course4/master/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;
}

Answer 1

像这样使用display:flex;或display:inline-block;

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

然后为每个col

添加填充

Answer 2

我想你错过了一些款式。添加

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

到你的样式表它运作正常。我已经添加了下面的代码段。

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

如何在水平div之间留出空间？

2 个答案: