如何使用CSS创建自适应Zig zag（交替）布局？
要使用CSS创建响应之字形布局，代码如下-
示例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing:border-box; } body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } div h1{ font-size: 40px; color: blueviolet; text-align: center; } div p{ font-size: 18px; } .container { padding: 64px; } .row:after { content: ""; display: table; clear: both } .width66 { float: left; width: 66.66666%; padding: 20px; height: 471px; } .width33 { float: left; width: 33.33333%; padding: 20px; height: 471px; } .large-font { font-size: 48px; } .xlarge-font { font-size: 64px } .button { border: none; color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; background-color: #4CAF50; } img { display: block; height: 250px; width: 250px; max-width: 100%; } @media screen and (max-width: 1000px) { .width66, .width33 { width: 100%; text-align: center; } img { margin: auto; } } </style> </head> <body> <h1 style="text-align:center">Responsive Zig Zag Layout Example</h2> <div class="width66"> <h1>A Gypsy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p> </div> <div class="width33"> <img src="https://i.picsum.photos/id/551/800/800.jpg"> </div> <div class="width33"> <img src="https://i.picsum.photos/id/211/800/800.jpg" alt="App"> </div> <div class="width66"> <h1>A cruise ship</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p> </div> <div class="width66"> <h1>Natures View</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p> </div> <div class="width33"> <img src="https://i.picsum.photos/id/251/800/800.jpg" > </div> </div> </div> </body> </html>
输出结果
上面的代码将产生以下输出-
在调整屏幕大小时-
-
有哪些方案？
-
问题内容： 我想这样布局我的JPane： 这样，顶部比底部更大/更小（顶部由另一个JPanel组成，并使用Graphics对象显示图像，而底部也由另一个JPanel组成，但使用Graphics对象绘制一些线和文字）。 我听说最好的方法是使用GridBagLayout和GridBagConstraints。 我试图找出GridBagConstraints的适当属性，但遇到了一些困难。这是我到目前为止
-
本文向大家介绍如何使用CSS创建自定义滚动条？，包括了如何使用CSS创建自定义滚动条？的使用技巧和注意事项，需要的朋友参考一下 要使用CSS创建自定义滚动条，代码如下- 示例
-
问题内容： 我有一个服务器端组件，该组件使用固定宽度生成流畅的布局“工具栏” ，并在其中生成许多布局。 然后，我需要自定义该布局，以使所有标签自动适应父级宽度。但是子级的数量是可变的，并且父级的宽度未知（它自动适合窗口）。 但是我找不到使它动态的方法（取消注释最后一个标签以查看它如何工作，大声笑）。 我不能更改服务器端源来使固定宽度的HTML gerenate。而且我真的很想仅通过CSS来解决它，
-
Material Design 中的响应式布局适用于任何尺寸的屏幕。自适应 UI 手册包含：保证布局一致性的灵活网格、内容如何在不同屏幕上重绘的断点细节以及关于一个应用如何从小的屏幕缩放到超大屏幕的描述。 断点 为了最优的用户体验，Material 用户界面应该适应如下断点宽度的布局：480、600、840、960、1280、1440 以及 1600 dp。 1.布局中的总结和细节显示内容 600
-
问题内容： 我真的不确定如何以其他方式提出这个问题，但是我试图在图像上加载文本-这本身似乎是一个棘手的任务，但是我已经使用本教程进行了学习。不幸的是，该教程有点过时了，我无法找到一种方法来动态更改移动设备的字体大小和跨度，并且仍然将文本保持在图像顶部的正确位置。 调整窗口大小时，文本和框的大小无法正确调整（在图像外部溢出）。 我尝试过百分比调整以及其他技术，但运气不佳。下面显示了我用来在背景上显示