css - 标题标签中的文本自动移动到框的右侧，没有任何 css 东西

Question

这是一个常见的<h3>但是文本出现在框的右侧，不是极右但几乎是这样

h3:

................................................ ..................................................... ..................................................... ...................

                                                             text appear here

................................................ ..................................................... ..................................................... ...................

html文件:

<div class="fifth">
<p>F-Village</p>
    <div class="f-t">
        <div class="f-t-col" id="f-t-c-photos">
            <h2>Photos</h2>
            <div class="big-photo">
                <img src="./images/photo.jpg">
            </div>
            <div class="small-photo">
                <img src="./images/photo.jpg">
                <img src="./images/photo.jpg">
                <img src="./images/photo.jpg">
            </div>
        </div>
        <div class="f-t-col" id="f-t-c-material">
            <h2>Material</h2>
            <span>
                ...some text...
            </span>
            <p>
                <img src="./images/history.jpg">
                ...some text...                
            </p>            
        </div>
        <div class="f-t-col">
            <h2>Words</h2>
            <p class="words"><em>"...some text..."</em>
            </p>
        </div>
    </div>
    <div class="f-m">
        <div class="f-m-l">
            <h3>Video</h3> <!--The problem appear here-->
        </div>
    </div>
</div>

CSS文件:

.fifth{
    /* margin-top: 40px; */
    width: 100%;
    height: 700px;
    color: white;
    background-image: url('../images/ww-bg.jpg');
    margin: auto;
}

.fifth .f-t-col{
    color: white;
    height: 265px;
    width: 27%;
    display: inline-block;
    margin-left: 57px;
    float: left;
}
#f-t-c-photos div{
    float: left;
}
#f-t-c-photos .big-photo{
    width: 190px;
}
#f-t-c-photos div:last-child{
    width: 80px;
}
.f-t{
    width: 1102px;
    margin-left: 125px;
    height: 240px;
    border-bottom: 2px solid rgba(100, 100, 100, 0.9);
}
.small-photo img{
    margin-bottom: 2px; 
    height: 55px;
    width: 60px;
}
.small-photo img:first-child{
    margin-top: 15px;
}
.big-photo img{
    width: 165px;
    height: 171px;
    margin-top: 15px;
    border: 2px #00b3ff solid;
}
.f-t-middle img{
    width: 165px;
    height: 170px;
    margin-top: 15px;
    border: 2px #00b3ff solid;
}

.words{
    margin-top: 65px;
    font-size: 17px;
}
.fifth h2{
    color: #2e2e2e;
    font-size: 17px;
    color: whitesmoke;
    padding: 0 0 10px 7px;
    background: url('../images/ww-title.png') top right no-repeat;
    margin-top: 5px;
    height: 8px;
    border-left: 3px solid red;
}
#f-t-c-material img{
    float: left;
    width: 215px;
}
#f-t-c-material span{
    font-weight: 800;
    font-size: 16px;
    color: #00b3ff;
}

.f-m:before{
    clear: both;
}
.f-m h3{
    color: white;
}

Answer 1

你可以这样对齐你的文字，

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

如果文本位于 右浮动或右空白 的 div 中，您可以将其更改为

float: left;