如何正确对齐div元素？

最新推荐文章于 2022-08-06 16:39:35 发布

CHCH998

最新推荐文章于 2022-08-06 16:39:35 发布

阅读量1k

点赞数

文章标签： css html5

原文链接：https://oldbug.net/q/WHMG/How-do-I-right-align-div-elements

版权

本文翻译自：How do I right align div elements?

The body of my html document consists of 3 elements, a button, a form, and a canvas. 我的html文档的正文包含3个元素，一个按钮，一个表单和一个画布。 I want the button and the form to be right aligned and the canvas to stay left aligned. 我希望按钮和表单右对齐，而画布保持左对齐。 The problem is when I try to align the first two elements, they no longer follow each other and instead are next to each other horizontally?, heres the code I have so far, I want the form to follow directly after the button on the right with no space in between. 问题是当我尝试对齐前两个元素时，它们不再彼此跟随，而是水平地彼此相邻吗？，这是我到目前为止的代码，我希望表格紧跟在右边的按钮之后中间没有空格。

 #cTask { background-color: lightgreen; } #button { position: relative; float: right; } #addEventForm { position: relative; float: right; border: 2px solid #003B62; font-family: verdana; background-color: #B5CFE0; padding-left: 10px; }

 <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script type="text/javascript" src="timeline.js"></script> <link rel="stylesheet" href="master.css" type="text/css" media="screen" /> </head> <body bgcolor="000" TEXT="FFFFFF"> <div id="button"> <button onclick="showForm()" type="button" id="cTask"> Create Task </button> </div> <div id="addEventForm"> <form> <p><label>Customer name: <input></label></p> <p><label>Telephone: <input type=tel></label></p> <p><label>E-mail address: <input type=email></label></p> </form> </div> <div> <canvas id="myBoard" width="1000" height="600"> <p>Your browser doesn't support canvas.</p> </canvas> </div> </body> </html>

#1楼

参考：https://stackoom.com/question/WHMG/如何正确对齐div元素

#2楼

floats are ok, but problematic with ie6 & 7. 浮点数还可以，但是ie6和7有问题。

i'd prefer to use margin-left:auto; margin-right:0; 我宁愿使用margin-left:auto; margin-right:0; margin-left:auto; margin-right:0; on the inner div. 在内部div

#3楼

I know this is an old post but couldn't you just use <div id=xyz align="right"> for right. 我知道这是一篇过时的文章，但您不能只使用<div id=xyz align="right">表示正确。

You can just replace right with left, center and justify. 您可以将right替换为left，center和justify。

Worked on my site:) 在我的网站上工作：）

#4楼

Other answers for this question are not so good since float:right can go outside of a parent div (overflow: hidden for parent sometimes might help) and margin-left: auto, margin-right: 0 for me didn't work in complex nested divs (I didn't investigate why). 此问题的其他答案不太好，因为float:right可以超出父div的范围（溢出：有时为父级隐藏可能会有所帮助）， margin-left: auto, margin-right: 0对我来说不起作用嵌套的div（我没有调查原因）。

I've figured out that for certain elements text-align: right works, assuming this works when the element and parent are both inline or inline-block . 我已经发现，对于某些元素， text-align: right可以正常工作，假设当元素和父级都为inline或inline-block时，此方法有效。

Note: the text-align CSS property describes how inline content like text is aligned in its parent block element. 注意： text-align CSS属性描述了如何在其父块元素中对齐内联内容（如文本）。 text-align does not control the alignment of block elements itself, only their inline content. text-align不控制块元素本身的对齐，仅控制其内联内容。

An example: 一个例子：

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

Here's a JS Fiddle . 这是JS Fiddle 。

#5楼

If you don't have to support IE9 and below you can use flexbox to solve this: codepen 如果您不必支持IE9及以下版本，则可以使用flexbox解决此问题： codepen

There's also a few bugs with IE10 and 11 ( flexbox support ), but they are not present in this example IE10和11也有一些错误（对flexbox的支持），但是在此示例中不存在

You can vertically align the <button> and the <form> by wrapping them in a container with flex-direction: column . 通过将<button>和<form>包裹在具有flex-direction: column的容器中，可以垂直对齐它们。 The source order of the elements will be the order in which they're displayed from top to bottom so I reordered them. 元素的源顺序将是它们从上到下显示的顺序，因此我对它们进行了重新排序。

You can then horizontally align the form & button container with the canvas by wrapping them in a container with flex-direction: row . 然后，您可以将form＆button容器与画布水平对齐，方法是将它们包装在具有flex-direction: row的容器中。 Again the source order of the elements will be the order in which they're displayed from left to right so I reordered them. 同样，元素的源顺序将是它们从左到右显示的顺序，因此我对它们进行了重新排序。

Also, this would require that you remove all position and float style rules from the code linked in the question. 同样，这将要求您从问题中链接的代码中删除所有position和float样式规则。

Here's a trimmed down version of the HTML in the codepen linked above. 这是上面链接的代码笔中HTML的精简版本。

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

And here is the relevant CSS 这是相关的CSS

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}

#6楼

If you have multiple divs that you want aligned side by side at the right end of the parent div, set text-align: right; 如果要在父div的右端并排对齐多个div，请设置text-align: right; on the parent div. 在父div上

CHCH998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何正确对齐div元素？

The body of my html document consists of 3 elements, a button, a form, and a canvas. 我的html文档的正文包含3
复制链接

扫一扫