我试图让我的 .blog-text 元素中的文本环绕 .glb-viewer 元素,但我似乎无法让它工作。我试过使用 float 来实现这一点,但文本仍然没有正确换行。
这里是反应组件
import React from 'react';
import GLBViewer from './GLBviewer';
import './Blog3D.css';
const Blog3D = ({ title, content, glbUrl }) => {
return (
<div className="blog-3d-container">
<h1>{title}</h1>
<div className="content-container">
<div className="blog-text">
<h2 dangerouslySetInnerHTML={{ __html: content }}></h2>
</div>
<div className="glb-viewer">
<GLBViewer glbUrl={glbUrl} />
</div>
</div>
</div>
);
};
export default Blog3D;
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.blog-3d-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.blog-3d-container h1 {
font-weight: 600;
font-size: 2.5rem;
text-align: center;
margin-bottom: 2rem;
width: 100%;
}
.content-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
overflow: hidden;
}
.blog-text {
flex: 1;
margin-right: 1rem;
line-height: 1.6;
font-size: 1.1rem;
color: #333;
width: 100%;
width: 100%;
float: left;
}
.glb-viewer {
float: right;
height: 300px;
width: 300px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-left: 1rem;
margin-bottom: 1rem;
}
我试过浮动、css 网格、flexbox、css 网格和 flexbox、chatGPT,什么都没有。我似乎无法弄清楚为什么它不起作用,我希望文本环绕在查看器下方而不是直接向下