英文:
trying to center divs within another div using inline css
问题
以下是翻译好的部分：
"I have an assignment for class (I know inline CSS isn't standard practice) in which he wants us to specifically use inline CSS in order to have a div box containing three other boxes that are centred horizontally. When I try to do it, no matter what I try, the formatting ends up odd, and I can't make them show up horizontally next to each other."
英文:
I have an assignment for class (I know inline CSS isn't standard practice) in which he wants us to specifically use inline css in order to have a div box containing three other boxes that are centred horizontally. When I try to do it, no matter what I try, the formatting ends up odd, and I can't make them show up horizontally next to each other.
Here's what it looks like, sorry for the badly scribbled out personal information.
答案1
得分: 0
我不确定我是否很好地理解了这个任务，但我想到了这个：
Float示例中，我使用width: calc((100% - 40px) / 3)，而不是width: 33%，以消除子div的margin-right（20px + 20px + 0 = 40px）。如果这有意义...
我还在容器div上使用了display: flow-root，这是创建块级格式上下文的最简单和安全的方式。
希望这有所帮助。
英文:
Not sure if I understand the assignment very well, but I came up this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<h2>Using Float</h2>
<div style="background-color: pink; padding: 20px; text-align: center; display: flow-root">
<div style="background-color: aquamarine; margin-right: 20px; width: calc((100% - 40px) / 3); height: auto; float: left;"><p>Lorem, ipsum dolor.</p></div>
<div style="background-color: aquamarine; margin-right: 20px; width: calc((100% - 40px) / 3); height: auto; float: left;"><p>Lorem, ipsum dolor.</p></div>
<div style="background-color: aquamarine; margin-right: 0px; width: calc((100% - 40px) / 3); height: auto; float: left;"><p>Lorem, ipsum dolor.</p></div>
</div>
<h2>Using Flex</h2>
<div style="background-color: pink; padding: 20px; text-align: center; display: flex; gap: 20px;">
<div style="background-color: aquamarine; flex-grow: 1;"><p>Lorem, ipsum dolor.</p></div>
<div style="background-color: aquamarine; flex-grow: 1;"><p>Lorem, ipsum dolor.</p></div>
<div style="background-color: aquamarine; flex-grow: 1;"><p>Lorem, ipsum dolor.</p></div>
</div>
<h2>Using Grid</h2>
<div style="background-color: pink; padding: 20px; text-align: center; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;">
<div style="background-color: aquamarine;"><p>Lorem, ipsum dolor.</p></div>
<div style="background-color: aquamarine;"><p>Lorem, ipsum dolor.</p></div>
<div style="background-color: aquamarine;"><p>Lorem, ipsum dolor.</p></div>
</div>
<!-- end snippet -->
In the Float example I use width: calc((100% - 40px) / 3) instead of width: 33% in order to eliminate the margin-right of the child divs (20px + 20px + 0 = 40px). If that makes sense...<br>
I also use display: flow-root on the container div, which is the easiest and safest way to create a block formatting context.<br><br>
Hope it helps.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论