responsive-design 相关问题

我想使用 Flex 制作移动优先响应式布局，其中三个部分以 20:50:30 的比例垂直划分，并具有屏幕的全高。这是 HTML 部分： ... 我想使用 Flex 制作一个移动优先响应式布局，其中三个部分以 20:50:30 的比例垂直划分，并具有屏幕的全高。这是 HTML 部分： <body> <main> <div class="parent"> <div class="topSection"> This is Top Section </div> <div class="middleSection"> This is Middle Section </div> <div class="bottomSection"> This is Bottom Section </div> </div> </main> </body> 预期布局： html,body { margin: 0; } main { height: 100vh; } .parent { height: 100%; display: flex; flex-direction: column; } .topSection { flex: 0 0 20%; } .middleSection { flex: 1 1 50%; background-color: yellow; } .bottomSection { flex: 0 0 30%; } 我是新来的，希望这个答案可以帮助你：D display: flex｜设置布局为flex flex-direction: column｜设置flex方向为column height: 100vh｜设置外层div的高度为页面高度的100% flex: <value>｜设置div比例 <div style="display: flex; flex-direction: column; height: 100vh"> <div style="flex:20%"> This is Top Section </div> <div style="flex:50%"> This is Middle Section </div> <div style="flex:30%"> This is Bottom Section </div> </div>

html css flexbox responsive-design tailwind-css

回答 2 投票 0

为什么我的标题（titulo）没有对齐？对齐和对齐不起作用？

我正在尝试将我的标题“Scream”居中这就是它的样子 https://codepen.io/luciajv/pen/dyaPNwB 我不明白为什么标题（titulo）在使用了 justify 后不是 Aligen，a...

html css responsive-design

回答 1 投票 0

如何使用自动宽度缩放已使用的 svg？

我有这个简单的 foo.svg：我有这个简单的 foo.svg： <?xml version="1.0" encoding="UTF-8" ?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" > <symbol id="test" viewBox="0 0 40 20" preserveAspectRatio="xMinYMin meet"> <rect width="40" height="20" fill="currentColor" /> </symbol> </svg> 此 html 中使用的是： <!DOCTYPE html> <html><head> <style> .logo {color:#f0f; border:1px solid #0f0; height:1em; width:auto;} </style> </head><body> <svg class="logo"> <use xlink:href="foo.svg#test" x="0" y="0" /> </svg> </body></html> 遗憾的是，如果我将高度设置为 1em，则 rect 会渲染为 32x16，但 svg 会渲染为 302x18。预计为 34x18。我怎样才能存档这个？ 302px 的宽度是 300px + 2*1px 边框宽度的 SVG 的标准宽度。您需要为 HTML 中的 SVG 元素指定适合符号长宽比的宽度和高度，或者为其指定与符号的 viewBox 匹配的 viewBox 属性。这里我使用viewBox： <!DOCTYPE html> <html> <head> <style> .logo { color: #f0f; border: 1px solid #0f0; height: 1em; width: auto; } </style> </head> <body> <svg class="logo" viewBox="0 0 40 20"> <use xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8c3ltYm9sIGlkPSJ0ZXN0IiB2aWV3Qm94PSIwIDAgNDAgMjAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiPgogICAgPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+CiAgPC9zeW1ib2w+Cjwvc3ZnPg==#test" x="0" y="0" /> </svg> </body> </html>

html svg responsive-design

回答 1 投票 0

卡响应问题。当我缩小屏幕尺寸时，我的卡片很薄并且无法读取

我在代码中添加了一些媒体查询，以便当我将屏幕缩小到 iPad 尺寸时，我的三卡行会下降到两张卡，而当我将屏幕缩小到移动设备尺寸时，我的三卡行会下降到一张卡。豪...

css responsive-design blogs card

回答 1 投票 0

使用 css 更改表格行布局

我有一张桌子 ... 我有一张桌子 <table> <thead> <th>Column1</th> <th>Column2</th> <th>Column3</th> </thead> <tbody> <tr> <td>Cell A1</td> <td>Cell A2</td> <td>Cell A3</td> </tr> <tr> <td>Cell B1</td> <td>Cell B2</td> <td>Cell B3</td> </tr> </tbody> </table> 我需要做的是使用CSS将整个表格显示为单列输出应该是： +---------+ | Cell A1 | +---------+ | Cell A2 | +---------+ | Cell A3 | +---------+ | Cell B1 | +---------+ | Cell B2 | +---------+ | Cell B3 | +---------+ 这背后的原因是每个表格单元格都非常宽，并且该表格是由 CouchCMS 在其管理面板中生成的。只需添加一点 CSS 即可显示为 block 表格中的每个元素，并隐藏您的 thead: table, tr, td { display: block; } thead { display: none; } <table> <thead> <th>Column1</th> <th>Column2</th> <th>Column3</th> </thead> <tbody> <tr> <td>Cell A1</td> <td>Cell A2</td> <td>Cell A3</td> </tr> <tr> <td>Cell B1</td> <td>Cell B2</td> <td>Cell B3</td> </tr> </tbody> </table> JSFIDDLE：http://jsfiddle.net/ghorg12110/k8pojm31/ 尝试这套CSS规则 table { border: 1px solid #ccc; border-collapse: collapse; } tbody, thead,tr { display: block; } th, td { padding: 4px; display: block; } <table border="1"> <thead> <th>Column1</th> <th>Column2</th> <th>Column3</th> </thead> <tbody> <tr> <td>Cell A1</td> <td>Cell A2</td> <td>Cell A3</td> </tr> <tr> <td>Cell B1</td> <td>Cell B2</td> <td>Cell B3</td> </tr> </tbody> </table> 如果您想显示单列，则不要使用多个 <th>。如果您需要列标题，请使用单个 <th> 标签。如果您不需要列标题，请尝试以下代码： <html> <head> <style> span{ color:#019ac8; } table{ border:1px dotted #000; } </style> </head> <body> <table> <tbody> <tr> <td><span>Cell</span> A1</td></tr> <tr><td><span>Cell</span> A2</td></tr> <tr><td><span>Cell</span> A3</td> </tr> <tr> <td><span>Cell</span> B1</td></tr> <tr><td><span>Cell</span> B2</td></tr> </tr> <td><span>Cell</span> B3</td> </tr> </tbody> </table> </body> </html> 第1栏第2栏第3栏

css responsive-design couch-cms

回答 3 投票 0

用户界面没有响应。用 Qt Designer 制作

我正在尝试使用 Qt-Designer 制作国际象棋 UI。我使用了布局，布局内每个小部件的水平/垂直策略都根据要求设置为首选/扩展或最小值...

python qt responsive-design pyqt5 qt-designer

回答 1 投票 0

HTML、SCSS、JSX、React、灵活网格

我需要这种使用灵活网格方法的方法，其中 768px 和 1024px 媒体屏幕的用户应该能够查看此处的确切输出，并且在移动应用程序视口上应该是...

html reactjs sass responsive-design grid

回答 1 投票 0

responsive-design 相关问题

最新问题