一个 div 中的一个 div 中的两个 div 之间的空间（不工作）
[英]Space between but its two divs inside a div inside a div (not working)
问题描述
I'm starting with HTML,CSS and JS and I'm trying to do a weather App.
我从 HTML,CSS 和 JS 开始，我正在尝试做一个天气应用程序。 I want it to have the temperature, then the city and its weather(with an icon) and then some extra info like humidity and wind, I pictured these as 3 different columns.我希望它有温度，然后是城市及其天气（带有图标） ，然后是湿度和风等一些额外信息，我将它们描绘为 3 个不同的列。 Which worked, until I wanted to do another 2 columns inside the extra info column(last one) I want it to look, like this for every type of info:哪个有效，直到我想在额外信息列（最后一个）内再做两列，我希望它看起来像每种类型的信息：
Humidity___________________ 30%
Where the "__" are blank spaces using 'space-between'.其中“__”是使用“space-between”的空格。 I have this JSFiddle where I portrayed the issue, you can see these 2 columns are sticked together, how do I change this?我有描述问题的JSFiddle ，您可以看到这两列粘在一起，我该如何更改？ and how can I do it in a way that adapts to screen-size, so the space-between varies and I don't use a static margin value or something like that.以及如何以适应屏幕尺寸的方式进行操作，因此间距会有所不同，并且我不使用 static 边距值或类似的东西。
* { background-color: rgb(41, 35, 35); font-family: 'Rubik', sans-serif; } body { background-color: rgb(41, 35, 35); position: relative; display: flex; height: 96vh; width: 98vw; } p { color: whitesmoke; font-size: 32px; font-weight: 300; margin: 0; }.divSearch { position: absolute; top: 0; right: 0; } #searchBar { width: 260px; height: 42px; margin-right: 10px; } #searchIcon { width: 42px; height: 48px; background-color: rgb(71, 71, 63) }.recentCity { font-size: 26px; font-weight: 300; margin: 12px; }.cityStats { display: flex; position: absolute; bottom: 0; left: 0; margin-left: 12px; width: 540px; text-align: left; align-items: center; justify-content: space-around; } #temperature { font-size: 82px; margin-right: 26px; } #temperature span { font-size: 60px; font-weight: 300; }.divExtraInfo { max-width: 150px; min-width: 130px; } #spaceBetween { display: flex; justify-content: space-between; }
<div class="cityStats"> <div id="divTemperature"> <p id="temperature"> 19°<span>C</span></p> </div> <div class="divExtraInfo"> <p id="city">Rosario</p> <p id="weatherText"> <span id="weatherIcon">☀</span> Sunny</p> </div> <div class="divExtraInfo" id="spaceBetween"> <div> <p id="windSpeed"> Wind</p> <p id="humidity">Humidity</p> </div> <div> <p id="windSpeedKM"> 32km/h</p> <p id="humidity%">62%</p> </div> </div> </div>
4 个解决方案
解决方案1
1 2022-07-25 19:19:23
Using display grid will help you eliminate the need for predetermined widths;使用显示网格将帮助您消除对预定宽度的需求； Using flex and auto margins you can align the temperature stats to the left and right.使用 flex 和 auto 边距，您可以将温度统计数据左右对齐。 The misalignment of the text you see is caused by the icon you can edit that with some more css alignment as well.您看到的文本未对齐是由您可以编辑的图标引起的，您还可以使用更多 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ alignment 进行编辑。
* { margin:0; padding:0; box-sizing: border-box; background-color: rgb(41, 35, 35); font-family: 'Rubik', sans-serif; }.container{ color: whitesmoke; font-size: 2rem; font-weight: 300; display: grid; grid-gap: 1rem; grid-template-columns: auto auto 1fr; }.temperature { font-size: 5rem; }.quick-info { display: flex; flex-direction: column }.conditions { display: flex; flex-direction: column; }.condition { display: flex; }.condition-stat{ margin-left: auto; }
<head> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap" rel="stylesheet"> </head> <div class="container"> <p class="temperature"> 19°<span>C</span></p> <div class="quick-info"> <p>Rosario</p> <p> <span id="weatherIcon">☀</span> Sunny</p> </div> <div class="conditions"> <div class="condition"> <p>Wind</p> <p class="condition-stat">32km/h</p> </div> <div class="condition"> <p>Humidity</p> <p class="condition-stat">62%</p> </div> </div> </div>
解决方案2
1 2022-07-25 19:20:42
解决方案3
0 2022-07-25 19:09:57
use padding-right to fix this:使用padding-right来解决这个问题：
* { background-color: rgb(41, 35, 35); font-family: 'Rubik', sans-serif; } body { background-color: rgb(41, 35, 35); position: relative; display: flex; height: 96vh; width: 98vw; } p { color: whitesmoke; font-size: 32px; font-weight: 300; margin: 0; }.divSearch { position: absolute; top: 0; right: 0; } #searchBar { width: 260px; height: 42px; margin-right: 10px; } #searchIcon { width: 42px; height: 48px; background-color: rgb(71, 71, 63) }.recentCity { font-size: 26px; font-weight: 300; margin: 12px; }.cityStats { display: flex; position: absolute; bottom: 0; left: 0; margin-left: 12px; width: 540px; text-align: left; align-items: center; justify-content: space-around; } #temperature { font-size: 82px; margin-right: 26px; } #temperature span { font-size: 60px; font-weight: 300; }.divExtraInfo { max-width: 150px; min-width: 130px; } #spaceBetween { display: flex; justify-content: space-between; }
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap" rel="stylesheet"> <div class="cityStats"> <div id="divTemperature"> <p id="temperature"> 19°<span>C</span></p> </div> <div class="divExtraInfo"> <p id="city">Rosario</p> <p id="weatherText"> <span id="weatherIcon">☀</span> Sunny</p> </div> <div class="divExtraInfo" id="spaceBetween"> <div> <p id="windSpeed"> Wind</p> <p id="humidity">Humidity</p> </div> <div style="padding-left:30px"> <p id="windSpeedKM">32km/h</p> <p id="humidity%">62%</p> </div> </div> </div>
解决方案4
0 2022-07-25 20:58:08
I would suggest breaking down the layout in to "containers" - here I used a "group-container" for things that "stack" like the city name and weather.我建议将布局分解为“容器”——在这里，我使用“组容器”来存储城市名称和天气等“堆叠”的东西。 I also set up a "container" using a class city-container which has three "groups" under it.我还使用 class 城市容器设置了一个“容器”，它下面有三个“组”。 I then set the last group to margin-left: auto;然后我将最后一组设置为margin-left: auto; to that it gets pushed to the far right no matter what the actual width is.无论实际宽度是多少，它都会被推到最右边。 Note that you can set the "block/group" width of those to make them line up vertically better but I leave that for an exercise.请注意，您可以设置它们的“块/组”宽度以使它们更好地垂直排列，但我将其留作练习。 Note the question here is then pushing values to the right of labels so that is done with .group-container.content-text:nth-child(n+1){ margin-left:auto; }请注意，这里的问题是将值推送到标签的右侧，以便使用.group-container.content-text:nth-child(n+1){ margin-left:auto; }完成。 .group-container.content-text:nth-child(n+1){ margin-left:auto; } where n+1 indicates the second "child" of a group-container (the values) where n+0 would be the 0 child (the label) for the 0 based values.其中n+1表示组容器（值.group-container.content-text:nth-child(n+1){ margin-left:auto; }的第二个“孩子”，其中n+0将是基于 0 的值的 0 孩子（标签）。 ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child参考： https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
I then had some fun and set up multiple "cities" but this also illustrates longer city names and some color using data attributes and some CSS for those values.然后我玩得很开心并设置了多个“城市”，但这也说明了更长的城市名称和使用数据属性的一些颜色，以及这些值的一些 CSS。
NOTE: the city names wrap odd due to your .extra-info { max-width: 150px; min-width: 130px; }注意：由于您的.extra-info { max-width: 150px; min-width: 130px; } .extra-info { max-width: 150px; min-width: 130px; } .extra-info { max-width: 150px; min-width: 130px; } - setting that slightly wider would probably be better here. .extra-info { max-width: 150px; min-width: 130px; } - 在这里设置稍微宽一点可能会更好。
var readings = [{ name: "El Desertos", weather: { name: "Sunny", type: "sunny" }, temperature: 35, windspeed: 17, humidity: 9 }, { name: "Nome", weather: { name: "Snow", type: "snow" }, temperature: -2, windspeed: 7, humidity: 11 }, { name: "Inferno", weather: { name: "Very Hot", type: "hot" }, temperature: 42, windspeed: 45, humidity: 2 }, { name: "Jungle City", weather: { name: "Wet and warm", type: "rain" }, temperature: 32, windspeed: 5, humidity: 96 }]; const cityWeather = document.getElementById('cities') const cityStats = cityWeather.querySelector('.city-stats'); // console.log( cityWeather.querySelector('.city').textContent); //const cityCopy = cityStats.cloneNode(true); //console.log(cityCopy); readings.forEach(city => { cityClone = cityStats.cloneNode(true);; // console.log(cityClone); cityClone.querySelector('.city').textContent = city.name; // console.log( cityClone.querySelector('.city').textContent); cityClone.querySelector('.temperature').textContent = city.temperature; cityClone.querySelector('.wind-speed').textContent = city.windspeed; cityClone.querySelector('.humidity-percent').textContent = city.humidity; cityClone.querySelector('.weather-text').textContent = city.weather.name; cityClone.querySelector('.weather-icon').dataset.icon = city.weather.type; //console.log(city.weather.type); cityWeather.appendChild(cityClone); });
* { font-family: 'Rubik', sans-serif; } body { background-color: rgb(41, 35, 35); height: 96vh; width: 98vw; }.group-container { display: flex; flex-direction: column; }.group-container.content-text:nth-child(n+1){ margin-left:auto; }.city-container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; border-bottom: 1px dashed #ffddff; }.city-stats { margin-left: 0.75rem; /* width: 540px;*/ text-align: left; }.temperature-container { font-size: 1rem; margin-right: 1.625rem; }.temperature-scale { font-size: 1.5em; }.extra-info { max-width: 150px; min-width: 130px; }.extra-info-container { display: flex; margin-left: auto; flex-direction: row; }.content-text { color: whitesmoke; font-size: 2em; font-weight: 300; margin: 0; }.weather-icon[data-icon="sunny"] { color: yellow; }.weather-icon[data-icon="snow"] { color: white; }.weather-icon[data-icon="rain"] { color: blue; }.weather-icon[data-icon="hot"] { color: red; }.content-text-label { margin-right: 0.5em; }
<div id="cities"> <div class="city-container city-stats"> <div class="group-container temperature-container"> <div class="content-text"><span class="temperature">19</span><span class="temperature-degree">°</span><span class="temperature-scale">C</span></div> </div> <div class="group-container extra-info"> <div class="content-text city">Rosario</div> <div class="content-text"><span class="weather-icon" data-icon="sunny">☀</span><span class="weather-text">Sunny</span></div> </div> <div class="group-container extra-info-container"> <div class="group-container"> <div class="content-text content-text-label">Wind</div> <div class="content-text content-text-label">Humidity</div> </div> <div class="group-container"> <div class="content-text"><span class="wind-speed windSpeedKM">32</span><span>km/h</span></div> <div class="content-text humidity-percent">62<span class="percent-label">%</span></div> </div> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.