Question

你好，我正在尝试使用CSS Grid和Flexbox创建基本的响应式布局。但是我遇到与标题有关的一些问题。我不完全理解为什么徽标和导航不跨越960px宽度。

HTML：

<div id="hd">
  <div class="container">
    <div class"ct">
      <div class="logo">
        Logo
      </div>
      <div class="nav">
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a href="#">four</a>
        <a href="#">five</a>
      </div>
    </div>
  </div>

CSS：

.container { 
  width: 960px; 
  margin: 0 auto; 
  display: grid;
  grid-template-columns: 2fr 1fr; 
  grid-template-areas: "top top"
    "main side"
}

.ct { 
  grid-area: top;
}

.logo { 
  background: #ddd;
}

.nav { 
  background: #ddf; 
}

第二，我正在尝试使徽标和导航并排放置。我的想法是将.ct设置为display：flex，但是它不起作用。

.ct { 
  grid-area: top;
  display: flex; 
  flex-direction: column; 
}

最后，我希望页眉的背景颜色跨页面的整个宽度，而内容（徽标，导航，主页面，侧面）不超过960px，这就是为什么我添加了#hd和#main div之间的容器。我的问题是，这是一种好方法吗？

Answer 1

我在您的代码中提到的问题如下

您忘记在班级名称前添加“ =”。即“” 然后输入“ flex-direction：column;”

请检查以下小提琴。希望这就是您要寻找的

Try this fiddle

$("#myform").submit(function(e) {
      e.preventDefault(); // 1. Dont reload the page
        var parms = {
            position : $("#position").val(),
            location : $("#location").val()
        };
        var par_val;
        var param_id = new window.URLSearchParams(window.location.search);
        par_val = param_id.get('id');
        console.log(par_val);
        var par_url = par_val;

        $.ajax({
            url: "http://localhost:3000/joblists/"+par_val,
            method: 'PUT',
            async: false,
            dataType : "json",
            contentType: "application/json; charset=utf-8",
            data: parms, // 2. Just send the parms object bcoz you already defined the dataType as json so it will automatically convert it into string.
            success: function(data){
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        })
    });

Answer 2

要并排放置，您需要将它们逐行放置，并在中心垂直对齐div的内容，并为其指定一些预定义高度：

.ct{
  height: 80px;
  display: flex;
  justify-content: flex-start;
  align-items:center;
  flex-flow: row;
}

Answer 3

删除flex-direction: column;，在课程=之后没有ct

<div class="ct">

#hd { 
background: #444;
}

.container { 
  width: 960px; 
  margin: 0 auto; 
  display: grid;
  grid-template-columns: 2fr 1fr; 
  grid-template-areas: "top top"
    "main side"
}

.ct { 
  grid-area: top;
  display: flex; 
  flex-direction: column; 
}

.logo { 
  background: #ddd;
}

.nav { 
  background: #ddf; 
}

.main {
  background: #ee0099; 
  grid-area: main;
}

.side { 
  background: #efefef; 
  grid-area: side;
}

.ct { 
  grid-area: top;
  display: flex; 
  flex-direction: column; 
}

<div id="hd">
  <div class="container">
    <div class="ct">
      <div class="logo">
        Logo
      </div>
      <div class="nav">
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a href="#">four</a>
        <a href="#">five</a>
      </div>
    </div>
  </div>
</div>
<div id="mn">
  <div class="container">
    <div class="main">
      <p>hello</p>
    </div>
    <div class="side">
      <p>hello</p>
    </div> 
  </div> 
</div>

了解CSS网格和Flexbox

3 个答案: