问题描述

我需要 (tabs+selected-content) 下面的内容来尊重当前在 relative 的父容器内的页面上显示的绝对选定内容的空间。任何人有任何想法如何做到这一点？

代码沙箱：https ://codesandbox.io/s/tabs-content-space-respected-m0gql

文件

应用程序.js

import "./styles.css";
import TabsWithContent from "./Components/TabsWithContent.js";

export default function App() {
  return (
    <div>
      <TabsWithContent />
      <h1 style={{textAlign: "center"}}>I am the next content, please respect my space</h1>
    </div>
  );
}

组件\TabsWithContent.js

import React, { useState } from "react";

// Data from backend
import { tabOneContent, tabTwoContent, tabThreeContent } from '../BackendData/TabsContent.js';

const TabsWithContent = () => {
  // Variables
  const [tabSelected, setTabSelected] = useState(1);

  // Functions
  const changeTab = (ev, tabNum) => {
    ev.preventDefault();
    setTabSelected(tabNum);
  };
  // Render
  return (
    <div className="div-tabs-with-content">
      <div className="page-container-content">
        <h2>Tabs Example</h2>
        <div className="div-tabs">
          <button onClick={ev => changeTab(ev, 1)} style={tabSelected === 1 ? {color: "#ffffff", backgroundColor: "#003478"} : {}}>Tab One</button>
          <button onClick={ev => changeTab(ev, 2)} style={tabSelected === 2 ? {color: "#ffffff", backgroundColor: "#003478"} : {}}>Tab Two</button>
          <button onClick={ev => changeTab(ev, 3)} style={tabSelected === 3 ? {color: "#ffffff", backgroundColor: "#003478"} : {}}>Tab Three</button>
        </div>
        <div className="div-tabs-content-container">
          <section className={tabSelected === 1 ? "div-tabs-content active" : "div-tabs-content"}>
            {tabOneContent.map((content, index) => 
                <div key={index}><i className="fa fa-check"></i><p>{content}</p></div>
            )}
          </section>
          <section className={tabSelected === 2 ? "div-tabs-content  active" : "div-tabs-content"}>
            {tabTwoContent.map((content, index) => 
                <div key={index}><i className="fa fa-check"></i><p>{content}</p></div>
            )}
          </section>
          <section className={tabSelected === 3 ? "div-tabs-content  active" : "div-tabs-content"}>
            {tabThreeContent.map((content, index) => 
                <div key={index}><i className="fa fa-check"></i><p>{content}</p></div>
            )}
          </section>
        </div>
      </div>
    </div>
  );
};

export default TabsWithContent;

后端数据\TabsContent.js

const tabOneContent = ["Content One", "Content Two", "Content Three"];
const tabTwoContent = ["Content One", "Content Two", "Content Three", "Content Four", "Content Five", "Content Six"];
const tabThreeContent = ["Content One", "Content Two", "Content Three", "Content Four", "Content Five", "Content Six", "Content Seven", "Content Eight"];

export {
  tabOneContent,
  tabTwoContent,
  tabThreeContent
}

索引.css

.App {
  font-family: sans-serif;
}
.page-container-content {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding: 0 25px 0 25px;
  margin: 0 auto;
}
.div-tabs-with-content {
  display: block;
  width: 100%; 
  margin-bottom: 60px;
}
.div-tabs-with-content h2 {
  margin-bottom: 20px;
  color: #003478;
  font-family: sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}
.div-tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2rem;
}
.div-tabs button {
  height: 50px;
  width: 210px;
  color: #003478;
  background-color: #ffffff;
  border: none;
  font-family: sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 3.6rem;
  outline: none;
  cursor: pointer;
}
.div-tabs button:hover {
  opacity: 0.7;
  color: white;
  background-color: #003478;
  transition: 0.2s ease-in;
}
.div-tabs-content-container {
  display: block;
  position: relative;
  width: 100%;
}
.div-tabs-content {
  position: absolute;
  left: 26%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  visibility: hidden;
  opacity: 0;
}
.div-tabs-content-container .active {
  transition: opacity 0.75s;
  visibility: visible;
  opacity: 1;
}
.div-tabs-content div {
  display: flex;
  align-items: center;
  width: 200px;
}
.div-tabs-content i {
  width: 24px;
  height: 24px;
  font-size: 1.6rem;
  padding: 2.5px;
  margin-right: 10px;
  font-weight: 300;
  color: #003478;
  border: 2px solid #003478;
  border-radius: 50%;
}
.div-tabs-content p {
  color: #000000;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 26px;
}

标签： cssreactjs

css - 使父 Div 环绕动态绝对子 Div（选项卡 + 内容）

问题描述

文件

解决方案

推荐阅读