CSS 使 table 粘在 div 的边缘

Question

给定：

function App() {
    return (
        <div className="main-container">    {/* the weather box (left) */}
         <div className="weather-box"></div>  {/* the weather information rectangle (right) */}
           <div className="weather_information">
             <div className="left_column">
               <tr>
                {leftColumnBuilder()}
               </tr>
             </div>
             <div className="right_column">
               <tr>
                {rightColumnBuilder()}
               </tr>
             </div>
           </div>
         </div>
  )
}

const leftColumnBuilder = () => {
    return (
        <table>
            <React.Fragment>
                <tr>Wind</tr>
                <tr>Pressure</tr>
                <tr>Humidity</tr>
                <tr>Visibility</tr>
            </React.Fragment>
        </table>
    )
}

const rightColumnBuilder = () => {
    return (
        <table>
            <React.Fragment>
                <tr>10 m/s</tr>
                <tr> 100 kPa </tr>
                <tr>20 %</tr>
                <tr>2 Km</tr>
            </React.Fragment>
        </table>
    )
}

ReactDOM.render(<App />, document.querySelector("#app"));

.main-container {
  background-color: lightgray;
  width: 60vw;
  height: 50vh;
  position: relative;
  left: 15vw;
  display: flex;
}

.weather-box {
  text-align: left;
  background-color: gray;
  width: 30%;
  height: inherit;
  border-radius: 16px;
}
.weather_information .left_column {
  float: left;
  position:absolute;
  text-align: left;

  font-size: 16px;
  font-weight: 700;

}

.weather_information .right_column {
  float: right;
  position: absolute;
  text-align: right;
  left: 80%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

与 JSFiddle here、

我希望最右边的列 table 粘在 div 容器的边缘。

左右tables class divs之间的float:left和float:right的多种组合，我也尝试过改变显示器。

我知道我可以使用一些手册 left: x % 属性，但我相信这会使我的应用程序在调整大小时看起来很糟糕。一定有办法让 table 粘在 div 的边缘。有人知道吗？

Answer 1

对于那个模型，没有必要使用float和absolute，这会引起不必要的问题。我建议你看看 css grid and flex-box。

我对代码进行了一些较大的重构，以使用 Grid 而不是 floats/absolutes，虽然不完整，但我相信这是一个好的开始。

此外，您有 trs 个外部表格，表格本身可以使用一些额外的标签（thead、tbody）、tr + td 等，没有必要在返回单亲 div.

时使用 React.Fragment

最后，这有点吹毛求疵，但请保持您的 css 类一致，不要将破折号与下划线混合使用。

function App() {
    return (
        <div className="main-container">
             <div className="weather-box"></div>
             <div className="weather-information">
               <div className="left-column">
                  {leftColumnBuilder()}
               </div>
               <div className="right-column">
                  {rightColumnBuilder()}
               </div>
            </div>
         </div>
  )
}

const leftColumnBuilder = () => {
    return (
        <div>
                <span>Wind</span>
                <span>Pressure</span>
                <span>Humidity</span>
                <span>Visibility</span>
        </div>
    )
}

const rightColumnBuilder = () => {
    return (
        <div>
                <span>10 m/s</span>
                <span>100 kPa </span>
                <span>20 %</span>
                <span>2 Km</span>
        </div>
    )
}

ReactDOM.render(<App />, document.querySelector("#app"));

.main-container {
  background-color: lightgray;
  width: 60vw;
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 50vh;
}

.weather-box {
  border-radius: 16px;
  background-color: gray;
}

.weather-information {
  display: grid;
  grid-template-columns: 1fr 1fr;
  // padding: 0 1rem;
  align-items: center;
}

.weather-information .left-column {
  font-size: 16px;
  font-weight: 700;
}

.weather-information .right-column {
  text-align: right;
}

.weather-information span {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

你最好像上面的答案那样使用 flexbox，它会在未来为你省去很多麻烦。

但在您的示例中，您可以将 left: 80% 替换为 right: 2px，或者您想要的任何填充，see fiddle

CSS 使 table 粘在 div 的边缘

CSS make table stick at the edge of a div

javascript

css

html-table

reactjs