Question

当我对一个奇怪的行为进行标记时，我正准备回答某个人的问题，我现在无法解释。所以我在下面的Snippet中有HTML和CSS代码。如果你在全屏幕上看它，左下角的蓝色div低于红色的div。我也在jsfiddle上测试了这个代码，它按预期工作。蓝色float: left;与红色float: left;对齐。

现在，我知道，这种情况发生了，因为在Stackoverflow中，自定义CSS在引导程序之前应用，而在jsfiddle上反之亦然。所以样式会被相互覆盖，具体取决于它运行的平台。我也知道，这不是创建两列布局的常用方法。如上所述，我在尝试回答this问题时发现了这种行为。在这种情况下，提出问题的人无法改变HTML结构，所以我们不得不处理这个问题。

我不知道是什么，为什么会有区别，因为他们都用.blue { border: 10px solid #fff; background: blue; height: 150px; float: left; } .red { border: 10px solid #fff; background: red; height: 300px; float: right; } @media screen and (max-width: 768px) { .red, .blue { float: none; } }覆盖<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="outer"> <div class="col-lg-6 col-sm-12 col-md-6 blue"> </div> <div class="col-lg-6 col-sm-12 col-md-6 blue"> </div> <div class="col-lg-6 col-sm-12 col-md-6 blue"> </div> <div class="col-lg-6 col-sm-12 col-md-6 red"> </div> <div class="col-lg-6 col-sm-12 col-md-6 blue"> </div> </div>我认为css来自哪里无关紧要来自，行为应该是一样的。

所以这里是小提琴的链接：https://jsfiddle.net/we9jcd8c/

这是Stack Snippet

import UIKit

class HouseTableViewCell: UITableViewCell {

var houseThumbnail: UIImageView!
var houseName: UILabel!
var houseRating: UILabel!
var houseReviewCount: UILabel!
var houseRent: UILabel!
var imageDim: UIView!


override init(style: UITableViewCellStyle, reuseIdentifier: String!) {
    super.init(style: UITableViewCellStyle.value1, reuseIdentifier: reuseIdentifier)

    houseThumbnail = UIImageView()
    self.contentView.addSubview(houseThumbnail)

    houseName = UILabel()
    self.contentView.addSubview(houseName)

    houseRating = UILabel()
    self.contentView.addSubview(houseRating)

    houseReviewCount = UILabel()
    self.contentView.addSubview(houseReviewCount)

    houseRent = UILabel()
    self.contentView.addSubview(houseRent)

    imageDim = UIView()
    imageDim.backgroundColor = UIColor.black.withAlphaComponent(0.0)
    self.contentView.addSubview(imageDim)
}

required init(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}


func makeConstraints() {

    houseThumbnail?.snp.makeConstraints { (make) -> Void in
        make.width.equalToSuperview().dividedBy(2)
        make.height.equalToSuperview()
        make.left.equalToSuperview()
    }

    houseName?.snp.makeConstraints { (make) -> Void in
        make.width.equalToSuperview().dividedBy(2)
        make.height.equalTo(30)
        make.right.equalToSuperview()
        make.top.equalToSuperview()
    }

    houseRating.snp.makeConstraints{ (make) -> Void in
        make.height.equalTo(30)
        make.top.equalTo(houseName.snp.bottom)
        make.left.equalTo(self.snp.centerX)
    }

    houseReviewCount.snp.makeConstraints{ (make) -> Void in
        make.height.equalTo(30)
        make.top.equalTo(houseName.snp.bottom)
        make.right.equalToSuperview()
    }

    houseRent.snp.makeConstraints{ (make) -> Void in
        make.width.equalToSuperview().dividedBy(2)
        make.height.equalTo(30)
        make.right.equalToSuperview()
        make.bottom.equalToSuperview()
    }

    imageDim.snp.makeConstraints{ (make) -> Void in
        make.width.height.top.left.equalTo(houseThumbnail)
    }
}


override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}


override func setHighlighted(_ highlighted: Bool, animated: Bool) {
     super.setSelected(highlighted, animated: animated)

    /* Logic to dim imageview */
    if highlighted {
        imageDim.backgroundColor = UIColor.black.withAlphaComponent(0.2)
    } else {
        imageDim.backgroundColor = UIColor.black.withAlphaComponent(0.0)
    }
}

mydb.public.mytable

为了说明不同之处，我添加了一张图片：

Answer 1

正如你所说，风格的顺序是相同的。但即使在float: left;的蓝色块覆盖float: left;中，红色块也有两种不同的行为：引导程序中的float: left;和float: right; css类中的.red。

因此，在小提琴片上，红色块浮动在右侧，允许蓝色块在线上并且在堆叠溢出时，蓝色尝试在红色块之后向左浮动并且由于已经采用12列而无法

Answer 2

对于没有CSS结构经验的人来说，这是一个经典的错误。最好的方法是创建两列，如：

这里留下了盒子这是正确的方框

如果您的内容是动态的，则必须将问题定位到框，并在关闭后添加

.clearfix {clear：both / left / right}。

但第一种方法是在浮动布局中制作列的学术方法。

Bootstrap

2 个答案: