英文:
HTML+CSS Sidebar next to centered content
问题
我有一个HTML-CSS布局，像这样：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
body {
margin: 5px;
}
#stripe {
max-width: 200px;
margin: auto;
background-color: yellow;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="stripe">
<main>
<p>一些内容</p>
</main>
</div>
</body>
</html>
<!-- end snippet -->
这给了我一个居中的条纹，用于我的内容。
现在我想将目录放在这个居中的条纹的右侧（或者也可以放在左侧）。它应该在绝对/固定位置，与居中的条纹有轻微的水平距离。文本应该扩展到条纹右侧（或左侧）的整个边界，如果文本超过边界，它应该换行（即换行）。
一个很好的例子在[这里](https://castel.dev/post/lecture-notes-3/)（向下滚动一点）。不幸的是，我无法通过检查HTML/CSS来弄清楚他是如何做到的。
例如，我尝试了以下方法，但宽度不正确，因此文本不会断行：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
body {
margin: 5px;
}
#stripe {
max-width: 200px;
margin: auto;
background-color: yellow;
}
#toc {
position: absolute;
top: 0;
background-color: blue;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="toc">
<p>这个文本太长了，不会自动换行，这很糟糕</p>
</div>
<div id="stripe">
<main>
<p>这</p>
<p>是</p>
<p>一个</p>
<p>示例</p>
<p>用于</p>
<p>一些</p>
<p>酷</p>
<p>内容</p>
</main>
</div>
</body>
</html>
<!-- end snippet -->
如果有人能帮助我实现这一点，那将是很棒的！非常感谢。
英文:
I have a HTML-CSS layout like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
body {
margin: 5px;
}
#stripe {
max-width: 200px;
margin: auto;
background-color: yellow;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="stripe">
<main>
<p>some content</p>
</main>
</div>
</body>
</html>
<!-- end snippet -->
This gives me a centered stripe for my content.
Now I want to put a table of contents to the right (or maybe also to the left) of this centered stripe. It should be in an absolute/fixed position, with a slight horizontal distance to the centered stripe. The text should expand over the whole right (or left) of the stripe to the border of the body. If the text is longer than that, it should wrap (i.e. make linebreaks).
A good example is here (scroll down a bit). Unfortunately I couldn't figure out how he does it by inspecting the HTML/CSS.
I have tried for example the following, but the width is wrong so that the text doesn't break:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
body {
margin: 5px;
}
#stripe {
max-width: 200px;
margin: auto;
background-color: yellow;
}
#toc {
position: absolute;
top: 0;
background-color: blue;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="toc">
<p>this text is so long and it doesn't break which is bad</p>
</div>
<div id="stripe">
<main>
<p>this</p>
<p>is</p>
<p>an</p>
<p>example</p>
<p>for</p>
<p>some</p>
<p>cool</p>
<p>content</p>
</main>
</div>
</body>
</html>
<!-- end snippet -->
If anybody could help me achieve this, that would be amazing! Thank you so much.
答案1
得分: 1
只需为居中的 div 的宽度添加一个自定义变量，然后侧边栏的宽度将等于：
{(100% - width_center_div) / 2 - gap }
:root {
--width: 200px;
}
* {
box-sizing: border-box;
}
body {
margin: 5px;
}
#stripe {
margin: auto;
width: var(--width);
background-color: yellow;
}
#toc {
position: absolute;
width: calc((100% - var(--width))/2 - 1rem);
top: 0;
// 对于右侧边栏，请使用 right: 0; 而不是 left
left: 0;
background-color: blue;
}
英文:
Just add a custom variable for the width of centered-div and then width of sidebar will be equal to:
{(100% - width_center_div) / 2 - gap }
:root {
--width: 200px;
}
* {
box-sizing: border-box;
}
body {
margin: 5px;
}
#stripe {
margin: auto;
width: var(--width);
background-color: yellow;
}
#toc {
position: absolute;
width: calc((100dvw - var(--width))/2 - 1rem);
top: 0;
// For right sidebar use right:0; instead of left
left:0;
background-color: blue;
}
答案2
得分: 0
我认为您可以通过使用grid来实现这个目标。定义两列，一列用于aside，另一列用于main内容。像这样：https://codesandbox.io/s/elegant-moore-4zqccp?file=/index.html
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles.css" />
<title>Static Template</title>
</head>
<body>
<aside>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
</aside>
<main>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
</main>
</body>
</html>
以及CSS：
body {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
min-height: 10vh;
}
aside {
border: 1px solid red;
align-self: center;
}
main {
border: 1px solid red;
}
希望这是您要寻找的内容。
英文:
I think you can achieve that by using grid. Defining 2 columns one for the aside and another one for the main content. Like this: https://codesandbox.io/s/elegant-moore-4zqccp?file=/index.html
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles.css" />
<title>Static Template</title>
</head>
<body>
<aside>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
</aside>
<main>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
<p>This is the main content for this webpage</p>
</main>
</body>
</html>
And the CSS:
body {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
min-height: 10vh;
}
aside {
border: 1px solid red;
align-self: center;
}
main {
border: 1px solid red;
}
I hope this is what you're looking for.
答案3
得分: 0
因为问题要求很多，而且没有提供要达到的示例，所以我将根据已经提供的示例进行解释。
在HTML中，有不同的方法来使文本换行，其中最常见的可能是<p>元素本身。因为<p>具有display: block属性，除非另有说明，它将自动占据所有可用的宽度。因此，如果声明多个<p>元素，它们将一个接一个地显示在不同的行上。有关display: block和其他显示值的更多信息可以在这里找到。另一种方法是使用<br>元素，或者称为“换行”元素。该元素将占用所有可用的宽度，从而在顶部和底部的元素之间创建分隔，但由于该元素默认是透明的，因此看不出有任何东西。有关此元素的更多信息可以在这里找到。可能还有其他方法来实现这一目标，但我认为你可能正在寻找的最终示例如下。
看起来你希望只在达到行末时才让文本换行。幸运的是，有一个CSS属性可以实现这一点，它叫做overflow-wrap。该属性告诉浏览器在文本达到行末时如何换行。默认值是normal，不对文本进行任何处理。我们想要使用的值是break-word，正如其名称所示，它将在达到行末时断开单词。有关此属性及其值的更多信息可以在这里找到。
希望这可以帮助你！
英文:
Because the question is asking for a lot and doesn't give an example of what it wants to achieve, I will go based off what examples have been given.
In html there are different ways to make text break, the most common is probably the <p> element itself. Because the <p> has display: block, it will automatically take all available width unless told otherwise, because of this, if you declare multiple <p> elements, they will all be on different lines, one after the other. More information about display: block and other display values can be found here. Another way to do this, is using the <br> element, or, "break line" element. This element will take all the available width, creating a separation between the elements on the top and bottom, however, because the element is transparent by default, it does not appear that anything is there. More information about this element can be found here. There are probably more ways to do this too, but the final example that I will give, is the one I think you are looking for.
It appears that you want to make the text break only when the end of the line has been reached. Luckily, there is a css property that you can use, called overflow-wrap. This property tells the browser how to break text when it gets to the end of a line. The default value is normal which does absolutely nothing to the text. The value we want to use is break-word, which, as the name implies, will break the word when it reaches the end of the line. More information about this property and its values can be found here
Hope this helps!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论