英文:
two divs side by side and nowrap, but the right one breaking down when not enough space
问题
我无法得到我想要的东西，尽管它看起来很简单。
<div class="around">
<div class="first">
<p>一些文字</p>
</div>
<div class="second">
<p>其他文字</p>
</div>
</div>
我有两个并排的div，每个div都有动态内容。
当浏览器宽度变得太小以适应内容时，右侧的div应该换行。重要的是，右侧div中的内容应该右对齐。
我已经阅读了其他帖子，但没有找到解决方法。我认为这是不可能的，因为我尝试过flex、grid、float等方法...但也许你们中的某个人有想法。
解决方案：
<style>
.around {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.second {
background: red;
}
.first,
.second {
display: flex;
flex-wrap: wrap;
min-width:0;
justify-content: space-between;
flex-grow: 1;
}
</style>
英文:
i can't get what i want, although it seems simple.
<div class="around">
<div class="first">
<p>Some words</p>
</div>
<div class="second">
<p>other words</p>
</div>
</div>
i have two divs side by side and each div has dynamic content.
and when browserwidth is getting to small for the content, the right div should break down.Important is, that the content in the right div align-righted is.
two divs have no space, but not breaking
i have read the other threads, but found nothing. and it think this is not possible, because i tried flex, grid, float, etc.... but maybe one of you has an idea
The solution:
<style>
.around {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.second {
background: red;
}
.first,
.second {
display: flex;
flex-wrap: wrap;
min-width:0;
justify-content: space-between;
flex-grow: 1;
}
</style>
答案1
得分: 0
我会在父元素上使用display:flex，并在每个子元素上设置flex属性为1，使它们平均占据父元素的空间。
min-width:0;是一个在这种情况下有帮助的技巧，具体原因我不清楚。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.around {
display:flex;
}
.first,.second {
flex:1;
min-width:0;
}
/* for demostration styling */
.around {
border:green 2px solid;
}
.first {
background:red;
}
.second {
background:blue;
}
<!-- language: lang-html -->
<div class="around">
<div class="first">
<p>Some words</p>
</div>
<div class="second">
<p>other words</p>
</div>
</div>
<div class="around" style="width:100px">
<div class="first">
<p>Some words</p>
</div>
<div class="second">
<p>other words</p>
</div>
</div>
<!-- end snippet -->
英文:
I would use a display:flex on the parent, and set the flex property to 1 in each of the children, allowing them to each take up the same amount of space from the parent.
the min-width:0; is a hack that helps in these situations, idk why.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.around {
display:flex;
}
.first,.second {
flex:1;
min-width:0;
}
/* for demostration styling */
.around {
border:green 2px solid;
}
.first {
background:red;
}
.second {
background:blue;
}
<!-- language: lang-html -->
<div class="around">
<div class="first">
<p>Some words</p>
</div>
<div class="second">
<p>other words</p>
</div>
</div>
<div class="around" style="width:100px">
<div class="first">
<p>Some words</p>
</div>
<div class="second">
<p>other words</p>
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
使用flex和flex-wrap: wrap;，我已经实现了你想要实现的效果。
你可以设置任意大小的div，一旦屏幕宽度太小，两个div无法在同一行上，它们就会分开，并且红色容器会向下移动。
<!-- language: lang-css -->
.around {
display: flex;
flex-wrap: wrap;
}
.second {
background: red;
}
<!-- language: lang-html -->
<div class="around">
<div class="first">
<p>Some words</p>
</div>
<div class="second">
<p>other words</p>
</div>
</div>
希望对你有帮助！
英文:
Using flex and flex-wrap: wrap; I got it to do what you were trying to achieve.
You can make the divs of any size and once the screen width is too small for both divs to be on the same line, it will break up and have the red container move down.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.around {
display: flex;
flex-wrap: wrap;
}
.second {
background: red;
}
<!-- language: lang-html -->
<div class="around">
<div class="first">
<p>Some words</p>
</div>
<div class="second">
<p>other words</p>
</div>
</div>
<!-- end snippet -->
答案3
得分: 0
默认情况下，插入的div会向下排列，尝试使用"display:flex"属性，并根据您的需求给它们添加间距。
英文:
Divs by default go down when inserted , try "display:flex" property and give them spacing according to your requirement.
答案4
得分: 0
解决方案：
<style>
.around,
.first,
.second {
display: flex;
flex-wrap: wrap;
}
.first,
.second {
flex-grow: 1;
}
英文:
The solution:
<style>
.around,
.first,
.second {
display: flex;
flex-wrap: wrap;
}
.first,
.second {
flex-grow: 1;
}
</style>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论