Question

如果您使用此页面并缩小浏览器窗口的宽度，则div而不是并排显示将堆叠在彼此之下。我试过显示：内联块也是如此。我希望强制浏览器在底部显示滚动条并保留div的位置，这样你就必须从左向右滚动才能查看所有内容。我尝试添加一个具有设定高度的容器div，以防止这种情况发生，但这不起作用。

#maincontainer {
	width: 1200px;
	height: 500px;
}
 

#left {
    width: 400px;
    height: 500px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    float: left;
}
    
#middle {
    width: 400px;
    height: 500px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    float: left;    
}
    
#right {
    width: 400px;
    height: 500px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    float: left;
}

<html>
    <link rel="stylesheet" type="text/css" href="teststyle.css">
    <body>
        <div id = 'maincontainer'>
            <div id = 'left'></div>
            <div id = 'middle'></div>
            <div id = 'right'></div>
        </div>
    </body>
</html>

Answer 1

因为边界。由于边界，每个正方形实际上是402px宽。如果您添加此css规则：* {box-sizing:border-box; }，您将获得所需的效果。

https://jsfiddle.net/2jwzrzv1/1/

Answer 2

如果基于您的CSS，行为是正确的。你想做一个小调整可以解决这个问题。使用box-sizing，以便在框内计算边框而不是在内。

因此，对于您的内部div，请使用box-sizing: border-box;。这是一个有效的例子：https://codepen.io/usmanity/pen/YxyyKY

Answer 3

原因是因为您使用了像素来指定2017-07-27T17:55:18.813Z: Ec2HandleUserData: Message: Could not find <powershell> and </powershell> 2017-07-27T17:55:18.814Z: Background plugin complete: Ec2HandleUserData 2017-07-27T17:55:18.814Z: After ready plugins complete. 2017-07-27T17:55:19.988Z: SSM Service is running now 2017-07-27T17:55:23.793Z: Failed to fetch instance metadata http://169.254.169.254/latest/meta-data/public-ipv4 with exception The remote server returned an error: (404) Not Found. 2017-07-27T17:55:23.797Z: Ec2SetWallpaper: Could not get metadata for: meta-data/public-ipv4上的宽度。你基本上告诉浏览器的是，无论窗口的宽度是多少，你都希望它是这个特定的大小。这自然会导致AWS::CloudFormation::WaitCondition : WaitCondition timed out. Received 0 conditions when expecting 1在保持其大小时堆叠。

如果您想将它们并排放置，无论浏览器宽度是多少，您都需要使用最多100％的百分比，具体取决于您<div>的数量喜欢和睦相处。

在您的情况下，CSS将是：

<div>

Answer 4

在这种情况下，我使用flex容器，基本上如果你这样做：

#maincontainer {
  width: 1200px;
  height: 500px;
  display: flex;
  flex-direction: row;
}

通过这样做，容器内的所有元素将彼此相邻放置，并尽可能地保持该布局。

还有一些关于flex容器的其他功能，例如order，align，这对操作定位非常有用。

希望这有帮助！

Answer 5

尝试使用float或者如果你想要一个滚动条，你可以去溢出。 https://www.w3schools.com/css/css_overflow.asp

Answer 6

您需要添加固定宽度的容器并将主容器设置为width auto并使用scroll-x：

var myArray = [];
myArray[0]= {name: "Mel", img : "img/ml.jpg", clicks : 0};
myArray[1]= {name: "Ang", img : "img/ma.jpg", clicks : 0};
myArray[2]= {name: "Cam", img : "img/mk.jpg", clicks : 0};
myArray[3]= {name: "Val", img : "img/vs.jpg", clicks : 0};
myArray[4]= {name: "Gab", img : "img/ga.jpg", clicks : 0};

let elemName=[];
let elemImg=[];
let elemClick=[];

for (let i = 0; i < myArray.length; i++) {      //create elements
  elemName[i] = document.createElement("h2");
  elemName[i].textContent = myArray[i].name;
  elemImg[i] = document.createElement("img");
  elemImg[i].src = myArray[i].img;
  elemClick[i] = document.createElement("h3");
  elemClick[i].textContent = myArray[i].clicks;

elemImg[i].onclick=function(){                  //count clicks
  myArray[i].clicks++;
  elemClick[i].textContent = myArray[i].clicks;
};

document.body.appendChild(elemName[i]); //Show names

 elemName[i].onclick=function(){        //When a name is clicked, display image and number of clicks, replacing the existing one

  //????????????????

  document.body.appendChild(elemImg[i]); 
  document.body.appendChild(elemClick[i]);
};

请注意，我将6px添加到fix-width容器以保存边框，我假设您已添加它们以进行调试。

防止向下堆叠Div

6 个答案: