Question

如何让周中会议日程与右边缘对齐？但不会丢失布局？我尝试使用div float: right，但这不对。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CONGREGATION NAME</title>
<style type="text/css">

body{
    width:100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}

.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}

.containerMeeting {

}

.textCongregation {
    text-align: left;
    font-family: Calibri;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
}

.textTitle {
    text-align: right;
    font-family: Calibri;
    font-size: 18pt;
    font-weight: 700;
}

@media print {
    body{
        background: #FFF;
    }

    .containerPage, .containerMeeting,  {
        width: 99%;
        min-width: 99%;
        max-width: 99%;
        padding-left: 0;
        padding-right: 0;
        margin-left:auto;
        margin-right:auto;
    }

}</style>
</head>

<body>

<div class="containerPage">
    <div class="containerMeeting">
        <div style="border-bottom: 1px grey solid;">
            <div style="border-bottom: 4px red solid; margin-bottom: 2px;">
                <span class="textCongregation">Congregation Name</span>
                <span class="textTitle">Midweek Meeting Schedule</span> </div>
        </div>
    </div>
</div>

</body>

</html>

也尝试过：

<div class="containerPage">
    <div class="containerMeeting">
        <div style="border-bottom: 1px grey solid;">
            <div style="border-bottom: 4px red solid; margin-bottom: 2px;">
                <span class="textCongregation" style="float:left">Congregation Name</span>
                <span class="textTitle" style="float:right">Midweek Meeting Schedule</span> </div>
        </div>
    </div>
</div>

但文字正在向下调整。

谢谢。

Answer 1

替代解决方案：使用表格：围绕有问题的两个元素创建额外的div（或使用现有的border-bottom: 4px red solid; margin-bottom: 2px; div），制作周围的容器{{1}并指定两个待对齐的元素display: table; width: 100%;以及固定或百分比宽度。

Answer 2

<span>元素默认为inline元素，因此无法对齐或浮动。但是，您可以将其display属性更改为display: block。然后，您可以在其上使用float（左或右），或将其定义为绝对定位并将其与right: 0px对齐（但是，对于后者，您还必须调整垂直位置（对于如果您对多个元素执行此操作，请使用top: 100px）。

Answer 3

您只能将text-align设置为阻止元素（例如div），而不是内联元素（例如span，b，a）。

正如@Johannes所说，将这两个跨度改为div。但是我不建议使用float和top属性 - 当文本包装时，这可能不会在较小的屏幕上工作。相反，使用flex布局。

通过添加display: flex将直接容器设置为Flex容器。还要添加justify-content: space-between以使两个文本div都在末尾。最后，添加align-items: baseline以使文本位于同一水平基线上。那就是它！

工作小提琴：https://jsfiddle.net/ay3hectf/5/

编辑：这是关于如何使用flex布局的良好指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何将第二个跨度右对齐到div的右下角？

3 个答案: