Question

我对浮动非常困惑。 .two应该在.one的右边但是。两个就在下面.one

div {
  width: 100px;
  background: #FF9;
}
;
 .theone {
  float: left;
  font-size: 20px;
}

<div class="theone">one</div>
<div class="theright">two</div>

Answer 1

进入div css add display：inline-block;

    div{
      display: inline-block;
    }

Answer 2

     .theright {
  float: left;
  font-size: 20px;
}

添加它，如果你想让2个div彼此相邻，那么最好让它们都向右浮动。另外你可以用.theone替换.theone，.theright

Answer 3

默认情况下，div有display: block。

您可能想为div设置另一种显示类型。

div {width：100px;背景：＃FF9;显示：内联; }

.theone {float：left; font-size：20px; }

See jsFiddle

Answer 4

我会尝试做出详细解释并解释。浮动元素从流动中的初始位置浮动。基本上，浮动效果仅影响在HTML结构上之后声明的元素。

在您的情况下，右浮动元素在非浮动元素之后声明。因此，#import "SecondViewController.h" #import "ImageTableViewCell.h" #define kCellIdentifier @"cell" @interface SecondViewController () { NSArray *_data; } @end @implementation SecondViewController - (void)viewDidLoad { [super viewDidLoad]; self.tableView.scrollEnabled = NO; self.tableView.separatorColor = [UIColor clearColor]; [self.tableView registerNib:[UINib nibWithNibName:@"ImageTableViewCell" bundle:nil] forCellReuseIdentifier:kCellIdentifier]; _data = @[@"img.jpg", @"img.jpg", @"img.jpg"]; } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return _data.count; } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return (self.tableView.bounds.size.height - self.navigationController.navigationBar.frame.size.height - [UIApplication sharedApplication].statusBarFrame.size.height) / 3; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { ImageTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCellIdentifier forIndexPath:indexPath]; cell.myImageView.image = [UIImage imageNamed:_data[indexPath.row]]; return cell; } @end显示在theright下方是正常的，您不会看到浮动效果。

要使元素浮动在另一个元素的右侧，必须在之前将其声明为。像这样：

theone

请注意，要使其生效，<div class="theright">two</div> <div class="theone">one</div> <style> .theright { float: right; } </style>元素必须大于theright。否则，theone将完全屏蔽theone将其内容推出开箱即用。这是因为浮动元素离开流动并悬停在其他元素上，其内容＆＃34;避免＆＃34;浮动块。

还有很多其他方法可以使用不同的approch获得相同的结果：

让theright浮动在左侧（将theone留作基本块元素）

使两个元素成为内联块并赋予它们适当的宽度

仅用于两个元素，没有必要，但如果您需要并排放置3个或更多元素，则可以使它们全部浮动在左侧（或者右侧以相反的顺序声明它们，具体取决于最终布局你想要的）

等

Answer 5

div {
  width: 100px;
  background: #FF9;
display: inline-block;
}
;
 .theone {
  float: left;
  font-size: 20px;
}

<div class="theone">one</div>
<div class="theright">two</div>

Answer 6

默认情况下，div的显示值设置为“block”，这意味着它们“从下一行开始”。如果为所有div添加display：inline-block属性，则可以为任何div添加float：left以使其成为第一个。

为什么div不能“浮动”？

6 个答案: