Question

我正在创建一个页面，其顶部有一个按钮（右边对齐），然后是div中的主页内容。

我在尝试分离按钮和主内容div时遇到了问题。这两个div目前正在重叠。我不认为这是一个很大的问题，但我想澄清一下最容易分离的方法，而不仅仅是利用边缘等等。

＆＃13;

.view-all-container {
  display: block;
  float: right;
  margin-bottom: 40px;
}

.view-all {
  background-color: #808080;
  color: #fff;
  padding: 10px;
}


.main-section {
  height: 400px;
  background-color: #ebebeb;
}

＆＃13;

<div class="view-all-container">
  <a class="view-all">View our range of holiday homes</a>
</div>

<div class="main-section">
  
</div>

＆＃13;

我发现当我向margin-top: 50px添加.main-section时，按钮会随之移动，就好像它包含在同一个div中一样。

Answer 1

如果您正在寻找最佳做法，请考虑以下事项：

1）避免使用float。有许多更好的方法可以在不需要恢复复杂过程的情况下获取所需元素。 float的最大问题是它会从正常的DOM流中删除您的元素。 https://designshack.net/articles/css/farewell-floats-the-future-of-css-layout/，https://www.webdesignerdepot.com/2014/07/the-secret-to-designing-website-layouts-without-css-floats/

2）如果您正在导航，请使用<a>标记。如果您在同一页面上执行某项操作，请使用<button>或<input type='button'/> https://davidwalsh.name/html5-buttons

以下是您想要的简单修复：

.view-all-container {
  margin-bottom: 10px;
  text-align: right;
}

.view-all {
  background-color: #808080;
  border: none;
  color: #fff;
  padding: 10px;
  text-align: middle;
}


.main-section {
  height: 400px;
  background-color: #ebebeb;
  padding: 5px;
}

<div class="view-all-container">
  <button class="view-all">View our range of holiday homes</button>
</div>

<div class="main-section">
  Stuff in the main section
</div>

我删除了float并更改为text-align。 <div>已经display: block，所以我删除了它。

我认为您顶部的按钮是在活动页面上进行更改，因此我将html从<a>标记更改为<button>。

如果您不想使用text-align，请尝试flex-box：

.view-all-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.view-all {
  background-color: #808080;
  border: none;
  color: #fff;
  padding: 10px;
}


.main-section {
  height: 400px;
  background-color: #ebebeb;
  padding: 5px;
}

<div class="view-all-container">
  <button class="view-all">View our range of holiday homes</button>
</div>

<div class="main-section">
  Stuff in the main section
</div>

关于使用float，我最喜欢的一句话来自这篇文章：https://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

如果你是CSS布局的新手，你会认为以富有想象力的方式使用CSS浮动是技能的高度。如果你已经消耗了尽可能多的CSS布局教程，你可能会认为掌握浮动是一种成熟的仪式。你会被这种复杂性所震惊的聪明才智所迷惑，当你终于明白花车如何运作时，你会获得成就感。

不要被愚弄。你被洗脑了。

Answer 2

您只需要在.main-section

上使用

.view-all-container {
  display: block;
  float: right;
  margin-bottom: 40px;
}

.view-all {
  background-color: #808080;
  color: #fff;
  padding: 10px;
}

.main-section {
  height: 400px;
  background-color: #ebebeb;
  clear: right;
}

清除浮动广告

＆＃13;

<div class="view-all-container">
  <a class="view-all">View our range of holiday homes</a>
</div>

<div class="main-section">

</div>

＆＃13;

CREATE FUNCTION ReplaceNumbers
(
    @str varchar(max)
)
RETURNS varchar(max)
AS
BEGIN

DECLARE @result varchar(max)
DECLARE @cnt int=1
WHILE @cnt <= LEN(@str)
    BEGIN
        SET @result = CONCAT(@result,
                            CASE WHEN SUBSTRING(@str,@cnt,1) IN ('0','1','2','3','4','5','6')
                            THEN CAST(PARSE(SUBSTRING(@str,@cnt,1) AS int)+1 AS varchar)
                            ELSE SUBSTRING(@str,@cnt,1) END)

        SET @cnt = @cnt + 1
    END;

RETURN REPLACE(@result, 'nil', '0')
END

＆＃13;

分开两个div

2 个答案: