• 粘滞位置在Flexbox上不起作用

    我在flexbox中有两列。左一,小一。它有自己的高度,并且自身溢出。右一个具有自动高度。当我滚动页面第二列时,也向下滚动,也向左移动相同的动作。但我不要这个。当我浏览整个页面时,在导航栏和页脚之间应该留有粘性。 我尝试定位:粘滞和top:0,但仍然无法正常工作。 这是我的截图: ul { margin: 0; list-style: none; } li { margin: 0; list-style: none; } .glossary { display: flex; }...
  • Flex行中未包含图像

    I have a card that is 250x420 pixels I need the information to take up all of the space it needs and have the image take up the rest. The image needs to be vertically and horizontally aligned. The image also has to shrink or grow keeping the aspect ratio. ...
  • 如何在CSS网格单元格中获得滚动列表

    我正在尝试使用css网格进行布局,但是无法在网格单元格中滚动内容: 在下面的代码中,我的目标是使父容器100%可见,让child1和child2的容器各自占用大约一半的空间(网格),并滚动child1和child2中的列表。 我可以计算.parent的高度,因为它是偏移父级的100%,但是要计算列表容器div的高度(由网格分配)?没有高度,列表容器将不会滚动。 I have a stack blitz at https://stackblitz.com/edit/js-hytrwz <style> ...
  • 按钮的行和列不适合手机屏幕

    我试图使我的按钮适合移动屏幕,但由于某种原因,它看起来很糟糕。 背景不会继续下降。你能指出我错了吗? 如果有帮助,按钮div会位于表单内。 我正在使用行,然后使用3 col-md-4,我认为这是我的身体或容器问题。但找不到问题。 Computer look : Mobile look: HTML代码 <div id="studentclass" style="display: none"> <div class="row justify-content-center text-center"> ...
  • 列和网格的响应式Flexbox列表

    I cant figure out how to center the lists for smaller devices. it does not stay at the center, there is always an extra space, i have used the text-align css and it still did not work. i think my approach to making responsive columns is wrong. i also trie...
  • CSS的响应能力

    大家好,我有一段时间没做网络开发了。我已经使用flexbox使网站达到了我认为的响应速度。 也是第一次在这里发布。如果这是信息的大量涌入,请让我知道获得帮助的常规方式是什么。 我总共有两页。一个主页和一个画廊,展示了我的所有作品。 一些HTML元素(视频)具有附加到语义的库,以摆脱javascript。在这种情况下,我使用的是AOS(滚动动画)。 无论如何,我使第一页(主页)响应iphoneX,但我无法使图库页面以任何方式,形状或形式响应,这使我发疯。 我知道可能存在很多错误,并且操作方法更简单。 除了图库...
  • 具有相同流体/自动高度CSS / SCSS的元素

    我想使三个元素的高度与仅文本内容的高度相同。或者至少是一种将它们对齐的方式,以便它们保持在同一行。 布局分为两列和三行(如代码段所示,列1,列2和列3),因此我可以由父div分配属性。 如果变量可以,我正在使用SCSS。 这是代码: .some-page-wrapper { background-color: red; } .row { display: flex; flex-direction: row; flex-w...
  • 将Flexbox列中的内部Flexbox行项目与最小宽度对齐

    我有一个ExperienceWidth组件的固定宽度flexbox列。 在ExperienceComponent组件中,它具有Title组件,该组件是行flexbox。 标题组件内部是包含文本的三个div。我希望以以下约束条件分发它们: in between text divs I want <hr />; a line between the text divs. the minimum width of the <hr /> between the first and second to be 50p...
  • 每列具有弹性框和边距的结构

    I need to make this structure: https://i.imgur.com/7YPURIy.png 我有这个HTML,我不能修改它,只能添加类。我的问题是列的边距,如果我有50%+ 25%+ 25,并且每列都有边距,则最后一列会导致溢出。我认为我可以使用calc(),但我认为这不是最好的解决方案... 我正在尝试使用flexbox,但是我可以使用任何东西(如果可能的话,最好的解决方案) The Codepen: https://codepen.io/visualit/pen/WNv...
  • 移动设备上的div重叠的问题

    I'm using the class vh-100 to make a multiple screen / section design. Idea being it's Step 1, 2 etc.. 似乎在桌面设备上绝对可以正常工作,但是当将屏幕缩小到sm设备时,一切似乎重叠。 我正在使用flex utils将项目与该部分的中心对齐,但在移动设备上重叠。 JS Fiddle can be seen here : https://jsfiddle.net/km3v12gz/ 有什么想法或原因会发生这种情...
  • 为什么我的div右边有空隙? (CSS和HTML)

    我有以下div,我希望在整个页面上均匀分布,但是由于某种原因,我在右边有一个空白。 为什么会这样呢? 我已经包含了我代码的相关部分(只是为了简化起见在div中清除了代码),并且还包含了正在发生什么的屏幕截图。 .flex-parent { display: flex; } .flex-child { flex: 1 0 0px; } .campaignstrategy.flex-child { background-color: #f0f7fb; background-positi...
公告

欢迎访问 goshare  点击这里设置您的邮箱  可以接收站内跟帖、回复邮件提醒,不错过任何一条消息。

关注公众号订阅更多技术干货! 码农俱乐部