如何在CSS中自定义各列的流动性？

编程问答 2022-08-14

问题描述

好的，所以我在CSS中有三列。 Click here for a screenshot of the columns.调整窗口大小时，最左列的左侧保持在固定位置。我也希望右侧栏的右侧具有相同的功能。其他所有侧面（中间栏，左侧栏的右侧，右侧栏的左侧）都是可调的。现在，唯一固定的位置是最左列的左侧。 甚至可能有这样的自定义修补程序（？）？ 另外，如何使列固定在顶部而不是底部？我也在照片上圈了圈。当一列比其他列大时，较小的列将保持在底部高度，而不是我想要的顶部。 我非常感谢您的帮助。我对CSS和HTML有点陌生，所以我还在学习。另外，如果我不能很好地解释它，我深表歉意，希望截图和代码对您有所帮助！非常感谢！

* {
  box-sizing: border-box;
}


/* Add a card effect for ticker(s) */

.card {
  background-color: rgb(24,28,41);
  padding: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5,105,256);
  /*rgb(196,95,0)*/
  border-radius: 3px;
  margin: 1%;
}

body {
  margin: 0;
}


/* Style the header */

.header {
  background-color: rgb(5,256)/*rgb(196,0)*/
  padding: 15px;
  text-align: center;
}


/* Style the top navigation bar */

.topnav {
  overflow: hidden;
  background-color: #333;
}


/* Style the topnav links */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Change color on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Create three equal columns that floats next to each other */

.column {
  display: inline-block;
  width: 30.5%;
  padding: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5,0)*/
  border-radius: 3px;
  margin-left: 1%;
  margin-right: 1%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width:600px) {
  .column {
    width: 98%;
  }
}

body {
  background-color: rgb(24,41);
  color: rgb(255,255,255);
  font-family: "Helvetica","Arial",sans-serif;
  margin: 0;
  padding: 0;
}
</head>
<body>
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>


<div class="card">
        <label for="ticker">Ticker(s):</label>
        <input type="text" id="ticker" name="ticker" value="" style="text-transform:uppercase"><br>
</div>


<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER INPUT INFO LATER</p>
 </div>
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER</p>
  </div>
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER</p>
  </div>
</div>
</body>
</html>

解决方法

在import matplotlib.pyplot as plt import mpl_toolkits.mplot3d import numpy as np # Functions from @Mateen Ulhaq and @karlo def set_axes_equal(ax: plt.Axes): """Set 3D plot axes to equal scale. Make axes of 3D plot have equal scale so that spheres appear as spheres and cubes as cubes. Required since `ax.axis('equal')` and `ax.set_aspect('equal')` don't work on 3D. """ limits = np.array([ ax.get_xlim3d(),ax.get_ylim3d(),ax.get_zlim3d(),]) origin = np.mean(limits,axis=1) radius = 0.5 * np.max(np.abs(limits[:,1] - limits[:,0])) _set_axes_radius(ax,origin,radius) def _set_axes_radius(ax,radius): x,y,z = origin ax.set_xlim3d([x - radius,x + radius]) ax.set_ylim3d([y - radius,y + radius]) ax.set_zlim3d([z - radius,z + radius]) # Generate and plot a unit sphere u = np.linspace(0,2*np.pi,100) v = np.linspace(0,np.pi,100) x = np.outer(np.cos(u),np.sin(v)) # np.outer() -> outer vector product y = np.outer(np.sin(u),np.sin(v)) z = np.outer(np.ones(np.size(u)),np.cos(v)) fig = plt.figure() ax = fig.gca(projection='3d') ax.plot_surface(x,z) ax.set_box_aspect([1,1,1]) # IMPORTANT - this is the new,key line # ax.set_proj_type('ortho') # OPTIONAL - default is perspective (shown in image above) set_axes_equal(ax) # IMPORTANT - this is also required plt.show() 类中使用display: flex。

注意：如果在所有内容（row）上删除box-sizing: border-box样式，您还将摆脱两侧的不等间距。

*
/* Add a card effect for ticker(s) */

.card {
  background-color: rgb(24,28,41);
  padding: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5,105,256);
  /*rgb(196,95,0)*/
  border-radius: 3px;
  margin: 1%;
}

body {
  margin: 0;
}


/* Style the header */

.header {
  background-color: rgb(5,256)/*rgb(196,0)*/
  padding: 15px;
  text-align: center;
}


/* Style the top navigation bar */

.topnav {
  overflow: hidden;
  background-color: #333;
}


/* Style the topnav links */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Change color on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Create three equal columns that floats next to each other */

.column {
  display: inline-block;
  width: 30.5%;
  padding: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5,0)*/
  border-radius: 3px;
  margin-left: 1%;
  margin-right: 1%;
  overflow: hidden;
}


/* Clear floats after the columns */

.row {
  display: flex;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width:600px) {
  .column {
    width: 98%;
  }
}

body {
  background-color: rgb(24,41);
  color: rgb(255,255,255);
  font-family: "Helvetica","Arial",sans-serif;
  margin: 0;
  padding: 0;
}

,

您也可以使用网格轻松地做到这一点。更容易实现全面响应，并且可以根据需要添加为mcuh列和框。它会自动调整。

* {
  box-sizing: border-box;
}


/* Add a card effect for ticker(s) */

.card {
  background-color: rgb(24,0)*/
  padding: 15px;
  text-align: center;
}


/* Style the top navigation bar */

.topnav {
  overflow: hidden;
  background-color: #333;
}


/* Style the topnav links */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Change color on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Create three equal columns that floats next to each other */

.grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-auto-rows: auto;
  grid-gap: 1%;
  margin: 0 1% 0 1%;
}

.column {
  padding: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5,0)*/
  border-radius: 3px;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width:600px) {

body {
  background-color: rgb(24,sans-serif;
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-auto-rows: auto;
  grid-gap: 1%;
  margin: 0 1% 0 1%;
}
</head>
<body>
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>


<div class="card">
        <label for="ticker">Ticker(s):</label>
        <input type="text" id="ticker" name="ticker" value="" style="text-transform:uppercase"><br>
</div>


<div class="grid">
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER INPUT INFO LATER</p>
 </div>
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER</p>
  </div>
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER</p>
  </div>
</div>
</body>
</html>

htmlmultiple-columns

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...