个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
在插入图像标签和 SVG 之前，我试图先完善我的网格布局。我添加了媒体查询来更改正文和主要元素的网格布局。
请注意，我注释掉了部分元素中的代码，因为我想在操作那些网格项中的元素之前查看整体网格布局的外观。
这是我想要实现的目标:https://ibb.co/Hzwd1tN
这是我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />
</head>
<body>
<header class="header">
<!-- <h1>YourApp</h1>
<div class="icon-bell-div">
<img src="icons/icon-bell.svg">
</div>
<div class="profile-name">
<img src="member-1.jpg">
</div>
<p>Josh Sullivan</p> -->
</header>
<nav class="side-navigation">
<!-- <ul class="navigation-items">
<li><a href="index.html"><img src="icons/icon-dashboard.svg"></a></li>
<li><a href="index.html"><img src="icons/icon-members.svg"></a></li>
<li><a href="index.html"><img src="icons/icon-visits.svg"></a></li>
<li><a href="index.html"><img src="icons/icon-settings.svg"></a></li>
</ul> -->
</nav>
<main>
<section class="search">
<h1>Dashboard</h1>
<input type="search" placeholder="Search">
</section>
<!-- TRAFFIC-->
<section class="traffic">
<!-- <h2>Traffic</h2>
<nav>
<ul>
<li>Hourly</li>
<li>Daily</li>
<li>Weekly</li>
<li>Monthly</li>
</ul>
</nav>
<canvas id="line-chart"></canvas> -->
</section>
<!-- DAILY TRAFFIC -->
<section class="daily-traffic">
<!-- <h2>Daily Traffic</h2>
<canvas id="bar-chart"></canvas> -->
</section>
<!-- MOBILE USERS -->
<section class="mobile-users">
<!-- <h2>Mobile Users</h2>
<canvas id="doughnut-chart"></canvas> -->
</section>
<!-- SOCIAL STATS-->
<section class="social-stats">
<h2>Social Stats</h2>
<!-- <div class="twitter">
<svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
</svg>
</div>
<div class="facebook">
<svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029 c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77 L40.43,21.739z"/>
</svg>
</div>
<div class="google">
<svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
</svg>
</div> -->
</section>
<!-- NEW MEMBERS -->
<section class="new-members">
<!-- <div class="member">
<img src="images/member-1.jpg">
</div>
<div class="member">
<img src="images/member-2.jpg">
</div>
<div class="member">
<img src="images/member-3.jpg">
</div>
<div class="member">
<img src="images/member-4.jpg">
</div> -->
</section>
<!--RECENT ACTIVITY-->
<section class="recent-activity">
<!-- <div class="member">
<img src="images/member-1.jpg">
</div>
<div class="member">
<img src="images/member-2.jpg">
</div>
<div class="member">
<img src="images/member-3.jpg">
</div>
<div class="member">
<img src="images/member-4.jpg">
</div> -->
</section>
<!-- MESSAGE USERS -->
<section class="message-users">
<!-- <input type="search" id="site-search" placeholder="Search for User">
<textarea rows="10" cols="50" placeholder="Message for User"></textarea>
<input type="submit" id="site-search" value="Send"> -->
</section>
<!-- SETTINGS -->
<section class="settings">
<!-- <label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Send Email Notifications
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Set Profile to Public
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<select name="timezone">
<option value="volvo" selected>Select a Timezone</option>
<option value="volvo">Volvo</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div class="buttons">
<button>Save</button>
<button>Cancel</button>
</div> -->
</section>
</main>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="app.js"></script>
</html>
这是我的 CSS:
* {
box-sizing: border-box;
}
/*MOBILE */
header {
grid-area: header;
}
.side-navigation {
grid-area: navigation;
}
main {
grid-area: main;
}
/*NON-MOBILE */
.search {
grid-area: search;
}
.traffic {
grid-area: traffic;
}
.daily-traffic {
grid-area: daily-traffic;
}
.mobile-users {
grid-area: mobile-users;
}
.social-stats {
grid-area: social-stats;
}
.new-members {
grid-area: new-members;
}
.recent-activity {
grid-area: recent-activity;
}
.message-users {
grid-area: message-users;
}
.settings {
grid-area: settings;
}
/*BODY GRID*/
body {
display: grid;
grid-template-rows: 80px 80px 1fr;
grid-template-areas:
"header"
"navigation"
"main";
}
header {
background-color: #7279C2;
}
.side-navigation {
background-color: #4D4A77;
}
main {
background-color: white;
}
@media (min-width: 768px) {
body {
grid-template-rows: 80px 1fr;
grid-template-columns: 80px 1fr;
grid-template-areas:
"header header"
"navigation main"
}
main {
border: 2px blue solid;
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 6fr 5fr 3fr 1fr 1fr;
grid-template-areas:
"search search"
"traffic traffic"
"daily-traffic mobile-users"
"social-stats social-stats"
"new members recent-activity"
"message-users settings";
}
}
因此，如果我的媒体查询正常工作，如果其中有多个网格元素，为什么我的主网格容器不能正确展开。
在这里，您可以看到仪表板和社会地位标题像那样聚集在一起。为什么会这样？
最佳答案
因为您的 grid-template-rows 定义没有反射(reflect)在您的 grid-template-areas 定义中(您必须指定相同数量的单位!)并且您不要定义 grid-template-rows 属性。
* {
box-sizing: border-box;
}
/*MOBILE */
header {
grid-area: header;
}
.side-navigation {
grid-area: navigation;
}
main {
grid-area: main;
}
/*NON-MOBILE */
.search {
grid-area: search;
}
.traffic {
grid-area: traffic;
}
.daily-traffic {
grid-area: daily-traffic;
}
.mobile-users {
grid-area: mobile-users;
}
.social-stats {
grid-area: social-stats;
}
.new-members {
grid-area: new-members;
}
.recent-activity {
grid-area: recent-activity;
}
.message-users {
grid-area: message-users;
}
.settings {
grid-area: settings;
}
/*BODY GRID*/
body {
display: grid;
grid-template-rows: 80px 1fr;
grid-template-columns: 80px 1fr;
grid-template-areas:
"header header"
"navigation main";
height: 100vh;
}
header {
background-color: #7279C2;
}
.side-navigation {
background-color: #4D4A77;
}
main {
background-color: white;
} <header class="header">
<!-- <h1>YourApp</h1>
<div class="icon-bell-div">
<img src="icons/icon-bell.svg">
</div>
<div class="profile-name">
<img src="member-1.jpg">
</div>
<p>Josh Sullivan</p> -->
</header>
<nav class="side-navigation">
<!-- <ul class="navigation-items">
<li><a href="index.html"><img src="icons/icon-dashboard.svg"></a></li>
<li><a href="index.html"><img src="icons/icon-members.svg"></a></li>
<li><a href="index.html"><img src="icons/icon-visits.svg"></a></li>
<li><a href="index.html"><img src="icons/icon-settings.svg"></a></li>
</ul> -->
</nav>
<main>
<section class="search">
<h1>Dashboard</h1>
<input type="search" placeholder="Search">
</section>
<!-- TRAFFIC-->
<section class="traffic">
<!-- <h2>Traffic</h2>
<nav>
<ul>
<li>Hourly</li>
<li>Daily</li>
<li>Weekly</li>
<li>Monthly</li>
</ul>
</nav>
<canvas id="line-chart"></canvas> -->
</section>
<!-- DAILY TRAFFIC -->
<section class="daily-traffic">
<!-- <h2>Daily Traffic</h2>
<canvas id="bar-chart"></canvas> -->
</section>
<!-- MOBILE USERS -->
<section class="mobile-users">
<!-- <h2>Mobile Users</h2>
<canvas id="doughnut-chart"></canvas> -->
</section>
<!-- SOCIAL STATS-->
<section class="social-stats">
<h2>Social Stats</h2>
<!-- <div class="twitter">
<svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
</svg>
</div>
<div class="facebook">
<svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029 c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77 L40.43,21.739z"/>
</svg>
</div>
<div class="google">
<svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
</svg>
</div> -->
</section>
<!-- NEW MEMBERS -->
<section class="new-members">
<!-- <div class="member">
<img src="images/member-1.jpg">
</div>
<div class="member">
<img src="images/member-2.jpg">
</div>
<div class="member">
<img src="images/member-3.jpg">
</div>
<div class="member">
<img src="images/member-4.jpg">
</div> -->
</section>
<!--RECENT ACTIVITY-->
<section class="recent-activity">
<!-- <div class="member">
<img src="images/member-1.jpg">
</div>
<div class="member">
<img src="images/member-2.jpg">
</div>
<div class="member">
<img src="images/member-3.jpg">
</div>
<div class="member">
<img src="images/member-4.jpg">
</div> -->
</section>
<!-- MESSAGE USERS -->
<section class="message-users">
<!-- <input type="search" id="site-search" placeholder="Search for User">
<textarea rows="10" cols="50" placeholder="Message for User"></textarea>
<input type="submit" id="site-search" value="Send"> -->
</section>
<!-- SETTINGS -->
<section class="settings">
<!-- <label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Send Email Notifications
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Set Profile to Public
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<select name="timezone">
<option value="volvo" selected>Select a Timezone</option>
<option value="volvo">Volvo</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div class="buttons">
<button>Save</button>
<button>Cancel</button>
</div> -->
</section>
</main>关于html - 尽管有多个网格元素，为什么我的网格容器没有展开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56828746/
26
4
0
这是我想做的 1 - 点击提交 2 - 隐藏 DIV 容器 1 3 - 显示 DIV 容器 2 4 - 将“PricingDisclaimer.php”中找到的所有 DIV 加载到 Div 容器 2
我有一个 ios 应用程序，它使用 iCloudcontainer 来保存用户的一些数据，例如用户的“到期日期”。我要用不同的方式创建应用程序的副本开发者账号。我要将用户从第一个应用程序迁移到第二个应
这是场景。 我有三个容器。 Container1、container2 和 container3(基于 Ubuntu 的镜像)，其中 container2 充当容器 1 和容器 2 之间的路由器。 我
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
我正在改造管道以使用声明式管道方法，以便我能够 to use Docker images在每个阶段。 目前我有以下工作代码，它执行连接到在 Docker 容器中运行的数据库的集成测试。 node {
我正在开发一个需要尽可能简单地为最终用户安装的应用程序。虽然最终用户可能是经验丰富的 Linux 用户(或销售工程师)，但他们对 Tomcat、Jetty 等并不真正了解，我认为他们也不应该了解。 所
我从gvisor-containerd-shim(Shim V1)移到了containerd-shim-runsc-v1(Shim V2)。在使用gvisor-containerd-shim的情况下，
假设我们只在某些开发阶段很少需要这样做(冒烟测试几个 api 调用)，让项目 Bar 中的 dockerized web 服务访问 Project Foo 中的 dockerized web 服务的最
各位，我的操作系统是 Windows 10，运行的是 Docker 版本 17.06.0-ce-win19。我在 Windows 容器中运行 SQL Server Express，并且希望将 SQL
谁能告诉我，为什么我们不能在 Azure 存储中的容器内创建容器？还有什么方法可以处理，我们需要在 azure 存储中创建目录层次结构？ 最佳答案 您无法在容器中创建容器，因为 Windows Azu
#include template struct Row { Row() { puts("Row default"); } Row(const Row& other) { puts
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
RDF容器用于描述一组事物 例如，把一本书的所有作者列在一起 RDF容器有三种类型： <Bag> <Seq> <Alt> <rdf:
编辑:从到目前为止添加的答案和评论看来，我没有正确解释我想要什么。下面是一个例子: // type not supporting any type of comparison [] [] type b
我正在测试 spatie 的异步项目。我创建了一个这样的任务。 use Spatie\Async\Task; class ServiceTask extends Task { protecte
我想使用 Azure Blob 存储来上传和下载文档。有一些公司可以上传和下载他们的文档。我想保证这些文件的安全。这意味着公司只能看到他们的文件。不是别人的。 我可以在 blob 容器中创建多个文件夹
我正在尝试与 Azure 中的容器实例进行远程交互。我已执行以下步骤: 已在本地注册表中加载本地镜像 docker load -i ima.tar 登录远程 ACR docker登录--用户名--密码
我正在研究http://progrium.viewdocs.io/dokku/process-management/，并试图弄清楚如何从单个项目中运行多个服务。 我有一个Dockerfile的仓库:
我有一个想要容器化的单体应用程序。文件夹结构是这样的: --app | |-file.py <-has a variable foo that is passed in --configs
我正在学习 Docker，并且一直在为 Ubuntu 容器制作 Dockerfile。 我的问题是我不断获取不同容器之间的持久信息。我已经退出，移除了容器，然后移除了它的图像。在对 Dockerfil
我是一名优秀的程序员,十分优秀！