灵活安排的div - 增加div正在移动其他div

Question

我已在此处发布了一个问题 Arrange a few divs

问题在于右侧的div正在增加，div的内容3和4正在向下移动，但应该保持在content_1的正确位置

这里是代码

＆＃13;

＆＃13;

CREATE VIEW dbo.Tally WITH SCHEMABINDING
AS 

    WITH C1 AS (SELECT 1 AS I UNION ALL SELECT 1),
         C2 AS (SELECT 1 AS I FROM C1 AS L CROSS JOIN C1 AS R),
         C3 AS (SELECT 1 AS I FROM C2 AS L CROSS JOIN C2 AS R),
         C4 AS (SELECT 1 AS I FROM C3 AS L CROSS JOIN C3 AS R),
         C5 AS (SELECT 1 AS I FROM C4 AS L CROSS JOIN C4 AS R),
         C6 AS (SELECT 1 AS I FROM C5 AS L CROSS JOIN C5 AS R),
         RN AS (SELECT ROW_NUMBER() OVER (ORDER BY (SELECT NULL)) AS N FROM C6)
    SELECT TOP (1000000) N
    FROM RN
    ORDER BY N;
GO

CREATE FUNCTION dbo.OwnTranslate (@String varchar(8000),@FindChars varchar(8000), @ReplaceChars varchar(8000))
RETURNS TABLE
AS RETURN (

    WITH ToBeReplaced AS (
    SELECT @String AS String,
        FC.N,
        SUBSTRING(@FindChars, FC.N,1) AS FC,
        ISNULL(SUBSTRING(@ReplaceChars, RC.N,1),'') AS RC
    FROM (SELECT TOP (LEN(@FindChars)) N FROM Tally) FC
        OUTER APPLY (SELECT TOP (LEN(@ReplaceChars)) T.N FROM Tally T WHERE T.N = FC.N AND T.N <= LEN(@ReplaceChars)) RC),
    Replacing AS (
        SELECT N, REPLACE(String, FC, RC) AS ReplacedString
        FROM ToBeReplaced
        WHERE N = 1
        UNION ALL
        SELECT R.N + 1, REPLACE(ReplacedString, TBR.FC, TBR.RC) AS ReplacedString
        FROM ToBeReplaced TBR
            JOIN Replacing R ON TBR.N = R.N + 1)
    SELECT TOP 1 ReplacedString
    FROM Replacing
    ORDER BY N DESC);
GO

WITH VTE AS (
    SELECT *
    FROM (VALUES ('This is a string to be Translated.')) V(S))
SELECT VTE.S, OT.ReplacedString
FROM VTE
     CROSS APPLY dbo.OwnTranslate (VTE.S, 'Ts ', 'qz_') OT;

GO
--Clean up
DROP FUNCTION dbo.OwnTranslate;
DROP VIEW Tally;

＆＃13;

body {
  margin: 0;
}

#wrapper {
  width: 600px;
  display: flex;
  height: 200px;
  margin: 0 auto;
}

.first {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}

#content_1 {
  background: red;
  width: 100%;
}

#content_2 {
  flex: 1;
  background: #aaa;
}

#content_4 {
  flex: 1;
  background: #ddd;
}

#content_3 {
  flex: 1;
  background: #eee;
}

＆＃13;

＆＃13;

＆＃13;

有人可以帮忙吗？

Answer 1

也许你需要它才能做出回应，所以这样：

＆＃13;

＆＃13;

body {
  margin: 0;
}

#wrapper {
  display: flex;
  height: 100vh;
  margin: 0 auto;
}

.first {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}

#content_1 {
  background: red;
  width: 100%;
}

#content_2 {
  flex: 1;
  background: #aaa;
}

#content_4 {
  flex: 1;
  background: #ddd;
}

#content_3 {
  flex: 1;
  background: #eee;
}

＆＃13;

<div id="wrapper">
  <div class="first">
    <div id="content_1">content_1</div>
    <div id="content_2">content_2</div>
    <div id="content_3">content_3</div>
  </div>
  <div id="content_4">content_4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果你想为部分使用固定高度，你需要将对齐属性添加到#wrapper以保持3＆amp; 4总是低于1：

＆＃13;

＆＃13;

body {
  margin: 0;
}

#wrapper {
  display: flex;
  margin: 0 auto;
  width:600px;
  align-items: flex-start; /*added this*/
}

.first {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}

#content_1 {
  background: red;
  width: 100%;
  height:40px;
}

#content_2 {
  flex: 1;
  background: #aaa;
  height:40px;
}

#content_4 {
  flex: 1;
  background: #ddd;
  height:150px;
}

#content_3 {
  flex: 1;
  background: #eee;
  height:40px;
}

＆＃13;

<div id="wrapper">
  <div class="first">
    <div id="content_1">content_1</div>
    <div id="content_2">content_2</div>
    <div id="content_3">content_3</div>
  </div>
  <div id="content_4">content_4</div>
</div>

＆＃13;

＆＃13;

＆＃13;