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

【问题标题】：CSS class for two elements doesn't respond correctly两个元素的 CSS 类没有正确响应
【发布时间】：2015-10-21 11:35:09
【问题描述】：

我目前对两个元素使用一个 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= "field-third"，它只更改第二个元素。这是给定类的 CSS 代码：

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

【问题讨论】：

你是否使用了正确的类名？
我注意到您在 css 中输入错误的高度，这可能是问题吗？
是的，刚刚看到...我打错了hegiht。另一件事是，我必须在同一个 CSS 类代码中将一个元素放在左侧，另一个放在右侧。有什么建议么？再次提前感谢..

标签： html css content-management-system

【解决方案1】：

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

1.第一个变体是通过将 clearfix 类添加到<div class="field-third"> - <div class="field-third 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;
}

但最好的变种是第一个。

【讨论】：