兩個容器都在父div幻燈片中。無論我把窗戶開得多窄,我都希望這兩部分永遠分開。我試著使用邊距,但它只是相對于父div放置每個div,我也試著使用百分比來表示每個div的位置,但我仍然沒有成功。現(xiàn)在我試圖使用浮動左,但現(xiàn)在他們都在對方的頂部。
.SlideShow {
height: 600px;
width: 100%;
position: absolute;
top: 24vh;
left: 0%;
background-color: rgba(37, 33, 37, 0.8);
}
.ImageContainer {
height: 500px;
width: 500px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
float: left;
background-color: orange;
}
.textContainer {
position: absolute;
color: white;
width: 30%;
height: 10%;
top: 50%;
transform: translate(0, -50%);
background-color: red;
float: left;
}
<!doctype html>
<html>
<head>
<title>
Hubble Telescope
</title>
<link href="Space.css" rel="stylesheet" />
<script src="Space.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="">
<div class="SlideShow">
<div class="ImageContainer" id="ImageContainer" onclick="pause()"></div>
<div class="textContainer">
<div class="centertext" id="textContainer"></div>
</div>
</div>
</body>
</html>
嘗試使用flex box。您可以使用flex box的gap屬性來使div保持分離。你也可以使用justify-content并給它一個值space-between。試試這段代碼
.SlideShow{
height: 600px;
width: 100%;
display: flex;
gap: 10px;
align-items: center;
top: 24vh;
left: 0%;
background-color: rgba(37, 33, 37, 0.8);
}
.ImageContainer{
height: 500px;
width: 500px;
background-color: orange;
}
.textContainer{
color: white;
width: 30%;
height: 10%;
background-color: red;
}
我希望這是你正在尋找的。但是我不知道你為什么用變換,你能解釋一下嗎
這里我用了一個網(wǎng)格(去掉了所有的位置:絕對;因為這樣不太好)將列放置在中心& quot滑塊& quot阻止。
我添加了三列和一個額外的行來說明一行如何位于中間列;另一個在第二排,但有一個空白。
對于您的實際問題,我使用了一個變量來表示行之間的間隙大小(我假設(shè)您想要行,但這很難判斷——但從這里很容易調(diào)整)
body {
/* reset so all browsers use the same */
font-size: 16px;
margin: 0;
padding: 0;
box-sizing: border-box;
/* reusable values */
--gap-size: 1.25em;
--slide-container-size: 37.5em;
--left-col-size: 6rem;
--right-col-size: 6rem;
/* just super-center the entire slide show container */
display: grid;
place-items: center;
}
.slide-show-container {
height: var( --slide-container-size);
width: 100vw;
background-color: #33333380;
display: grid;
grid-template-columns: var(--left-col-size) auto var(--right-col-size);
grid-template-rows: auto 4em 4em;
gap: var(--gap-size);
}
.image-container {
grid-row-start: 1;
grid-row-end: 1;
grid-column-start: 1;
grid-column-end: span 3;
background-color: orange;
}
.text-container {
grid-row-start: 2;
grid-row-end: 2;
grid-column-end: span 3;
color: white;
background-color: red;
display: grid;
place-items: center;
border: solid cyan 1px;
padding: 0.5em;
margin: 0.75em;
}
.tester-container {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 2;
color: white;
background-color: #FF000040;
display: grid;
place-items: center;
border: solid blue 1px;
height: 2rem;
color: #FFFF00;
}
.center-text {
border: solid lime 1px;
}
/*
.SlideShow {
height: 600px;
width: 100%;
position: absolute;
top: 24vh;
left: 0%;
background-color: rgba(37, 33, 37, 0.8);
}
.image-container {
height: 500px;
width: 500px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
float: left;
background-color: orange;
}
.text-container {
position: absolute;
color: white;
width: 30%;
height: 10%;
top: 50%;
transform: translate(0, -50%);
background-color: red;
float: left;
}
*/
<body>
<div class="SlideShow slide-show-container">
<div class="image-container" id="ImageContainer"></div>
<div class="text-container">
<div class="center-text" id="textContainer">texty text</div>
</div>
<div class="tester-container">
<div class="center-text" id="textContainer">tester out text</div>
</div>
</div>
</body>