Question

我目前正在为两个元素使用一个CSS类，但是当我使用css代码更改属性时，没有任何反应。我知道这是一个初学者的错误，但我真的无法看到我的错误。感谢您的帮助。

  <div class="footer-main">
    <div class="content">
        <div class="field-third">
            <div class="f-holder">
                <h3>Got a Query?</h3><br>
                <a href="#" class="button white">Send</a>
            </div>
        </div>
        <div class="field-third">
            <img src="/public/images/logo.jpg" alt="Logo">
        </div>
        <div class="field-third">
            <div class="f-holder">
                <h3>Get in touch!</h3>
                <div><span class="highlight">T:</span> 222222222222222</div>
                <div><span class="highlight">Shop:</span> 22222222222222</div>
                <div><span class="highlight">E:</span> reception@something.com</div><br>
                <br>
                <div><span class="highlight">Mon to Fri:</span> 9am to 6pm</div>
                <div><span class="highlight">Sat to Sun:</span> 9am to 4pm</div>
                <a href="#" class="button white">Book Online</a>
            </div> 
        </div>
    </div>
</div>

我使用 class =＆＃34; field-third＆＃34; ，它只更改第二个元素。这是我的CSS代码以及给定的类：

    .f-holder {
float:right;
background-color: rgba(4, 32, 44, 0.9);
padding: 50px 40px;
width: 355px;
hight:437px;
}

Answer 1

你应该在浮动元素后清除。有三种变体：

1.第一个变体是通过向<div class="field-third"> - <div class="field-third clearfix">添加clearfix类来使用clearfix。之后添加clearfix样式：

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

2.第二个变体是将高度设置为第三个字段。

3.第三种变体是增加宽度和溢出：隐藏;第三场。

.field-third {
width: 100%;
overflow: hidden;
}

但最好的变体是第一个。

两个元素的CSS类没有正确响应

1 个答案: