Question

我有一个快速的菜鸟问题。我曾经认识过CSS，但是在多年没有使用过它之后就没有了......

反正

我试图将两个div叠加在一起。我的部分代码在下面。

CSS：

.faq_left {
    width: 134px;
    height: 495px;
    float: left;
    background-color:red;
}

.faq_box_top {
    width: 279px;
    height: 200px;
    float: top;
    background-color:black;
}

.faq_box_bottom {
    width: 279px;
    height: 295px;
    float: bottom;
    background-color:green;
}

.faq_right {
    width:783px;
    height: 495px;
    float: left;
    background-color:yellow;
}

HTML

<div class="faq_left"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
<div class="faq_right"></div>

我想在左边的faq_left。

我想要faq_box_top＆amp; faq_box_bottom位于中心，其中faq_box_top位于faq_box_bottom之上。

我想在右边的faq_right。

附上我的页面和样式表以及我想要实现的图像。

提前致谢，

Answer 1

您应该使用var ffmpeg = require('fluent-ffmpeg'); // ffmpeg.setFfprobePath("c:\\Apps\\ffmpeg\\bin\\ffprobe.exe"); var filename = 'j:\\some.avi'; var command = ffmpeg(filename); // Code from an example command .on('filenames', function(filenames) { console.log('Will generate ' + filenames.join(', ')) }) .on('end', function() { console.log('Screenshots taken'); }) .on('error', function(err, stdout, stderr) { console.log(" =====Convert Video Failed======"); console.log(err); console.log("stdout: " + stdout); console.log("stderr: " + stderr); }) .screenshots({ // Will take screens at 20%, 40%, 60% and 80% of the video count: 4, folder: 'd:\\projects\\pics' })而不是x<- 1:20 y <- c("A","A","A","A","A","A","A","A","B","B","B","B","B","B","B","B","B","C","C","C") df <- as.data.frame(cbind(x,y))，因为您提供的值是错误的。我的方法是，将它们放在顶部，左侧，底部和右侧，根据左侧或顶部position进行调整，给出负边距的偏移量。

请看下面的代码段。

＆＃13;

float

＆＃13;

50%

＆＃13;

这就是它在.faq_left, .faq_box_top, .faq_box_bottom, .faq_right { position: absolute; } .faq_left { width: 134px; height: 495px; left: 0; top: 50%; margin-top: -247px; background-color:red; } .faq_box_top { width: 279px; height: 200px; top: 0; left: 50%; margin-left: -139px; background-color:black; } .faq_box_bottom { width: 279px; height: 295px; left: 50%; margin-left: -139px; bottom: 0; background-color:green; } .faq_right { width:783px; height: 495px; right: 0; top: 50%; margin-top: -247px; background-color:yellow; }缩放中的外观：

Answer 2

在整页中查看摘要。

float仅限：left，right或none。没有： ~~top~~ 或 ~~bottom~~ 。

左右框有display: inline-block，以便它们彼此相邻。

顶部和底部框有clear: both，因此旁边没有任何东西。

顶部和底部框有margin: 0 auto，以便它们居中。

＆＃13;

.faq_left {
  width: 134px;
  height: 495px;
  float: left;
  background-color: red;
  display: inline-block;
}
.faq_box_top {
  width: 279px;
  height: 200px;
  background-color: black;
  clear: both;
  margin: 0 auto;
}
.faq_box_bottom {
  width: 279px;
  height: 295px;
  background-color: green;
  clear: both;
  margin: 0 auto;
}
.faq_right {
  width: 783px;
  height: 495px;
  float: left;
  background-color: yellow;
  display: inline-block;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>33180711</title>

</head>

<body>
  <div class="faq_box_top"></div>
  <div class="faq_left"></div>
  <div class="faq_right"></div>
  <div class="faq_box_bottom"></div>
</body>

</html>

＆＃13;

盒子的尺寸很奇怪......这是故意的吗？你不清楚左边和右边的盒子你想要什么......你想要它们触摸还是你想要它们之间的空间？如果您需要后者，请将右侧框更改为float: right

Answer 3

我不会使用绝对定位，因为它可能很容易破坏你的布局。相反，我会将顶部和底部div包装在另一个div中，如下所示：

<div class="faq_left"></div>
<div class="faq_middle">
    <div class="faq_box_top"></div>
    <div class="faq_box_bottom"></div>
</div>
<div class="faq_right"></div>

然后只需更改一下CSS：

.faq_left {
    width: 134px;
    height: 495px;
    float: left;
    background-color:red;
}

.faq_middle {
    width: 279px;
    float: left;
}

.faq_box_top {
    height: 200px;
    background-color:black;
}

.faq_box_bottom {
    height: 295px;
    background-color:green;
}

.faq_right {
    width:134px;
    height: 495px;
    float: left;
    background-color:yellow;
}

您可以在此处看到它：https://jsfiddle.net/u83dpf7t/

Answer 4

两个变化：

.faq_right {
    width:783px;
    height: 495px;
    float: right;
    background-color:yellow;
}

那应该是right而不是左，好吗？

并重新订购：

<div class="faq_left"></div>

<div class="faq_right"></div>

<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>

在这里摆弄：http://jsfiddle.net/pt8dcc1t/1/

如何将Divs叠加在一起

4 个答案: