英文:
CSS problem with divs and inline components
问题
想象一下这样的代码：
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
它会呈现出类似以下的效果：
我希望蓝色的 div 出现在红色的 div 右侧并保持在那里。假设我不能改变 div 的当前位置，所以我需要在 CSS 中实现。如何可以做到呢？
英文:
Imagine a code like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
}
.main {
background-color: yellow;
}
<!-- language: lang-html -->
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
<!-- end snippet -->
It will render something like this:
I want that the blue div comes up and stay on the right of the red div. Imagine that I can´t change the divs from where they are, so I need to do it in css. How can I do it?
答案1
得分: 1
不更改标记的情况下，如果您将float: left设置为红色<div>，则可以将蓝色<div>放在其右侧。
英文:
Without changing the markup, if you set float: left to the red <div> then you could put the blue <div> to its right side
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.main {
background-color: yellow;
}
<!-- language: lang-html -->
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
<!-- end snippet -->
答案2
得分: 0
使用float在红色div上的先前解决方案效果很好，但这里还有另一种可能的解决方案：
将position: relative;应用于蓝色div（以便能够相对于其默认位置移动它），并添加top: -100px; left: 100px;以将其移动到红色div旁边：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: -100px;
left: 100px;
}
.main {
background-color: yellow;
}
<!-- language: lang-html -->
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
<!-- end snippet -->
英文:
The previous solution which uses float on the red div works well, but here is another possible solution:
Apply position: relative; to the blue div (to be able to move it in relation to its default position) and add top: -100px; left: 100px; to move it up next to the red div:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: -100px;
left: 100px;
}
.main {
background-color: yellow;
}
<!-- language: lang-html -->
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
<!-- end snippet -->
答案3
得分: 0
这也可以通过grid CSS来实现。这里我使用了一个命名模板box，然后在"chatty verbose" CSS中为每个"block"放置了位置相关的样式。我为了清晰度添加了一些颜色和其他元素，但将"position relate"部分保留在单独的CSS块中。
.main {
font-size: 2rem;
display: grid;
grid-template: "box";
background-color: yellow;
}
.main *,
.main::before {
grid-area: box;
}
.green-block {
place-self: start;
}
.red-block {
width: 50%;
place-self: end start;
}
.blue-block {
width: 50%;
place-self: end end;
}
.green-block {
height: 3rem;
background-color: green;
}
.red-block {
height: 3rem;
background-color: red;
}
.blue-block {
background-color: blue;
}
.blue-block,
.green-block,
.red-block {
/* 为了清晰度和在块中使文本垂直居中 */
display: grid;
color: cyan;
font-family: sans-serif;
text-transform: uppercase;
place-items: center;
}
<div class="main">
<div>
<div class="div green-block">green</div>
<div class="div1 red-block">red</div>
</div>
<div class="div2 blue-block">blue</div>
</div>
英文:
This can also be done with the grid CSS. Here I used a named template box and then in the "chatty verbose" CSS I put the positional related for each "block". I added classes to the CSS just for clarity but you could update to your classes.
I added some color and things just for clarity and visual references but kept the "position relate" in separate CSS chunks.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.main {
font-size: 2rem;
display: grid;
grid-template: "box";
background-color: yellow;
}
.main *,
.main::before {
grid-area: box;
}
.green-block {
place-self: start;
}
.red-block {
width: 50%;
place-self: end start;
}
.blue-block {
width: 50%;
place-self: end end;
}
.green-block {
height: 3rem;
background-color: green;
}
.red-block {
height: 3rem;
background-color: red;
}
.blue-block {
background-color: blue;
}
.blue-block,
.green-block,
.red-block {
/* color for clarity and just to super center the text in the blocks */
display: grid;
color: cyan;
font-family: sans-serif;
text-transform: uppercase;
place-items: center;
}
<!-- language: lang-html -->
<div class="main">
<div>
<div class="div green-block">green</div>
<div class="div1 red-block">red</div>
</div>
<div class="div2 blue-block">blue</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论