如何将css中div下面的文字移置上一个div的右侧？

Posted 2023-04-25

我试着将上一行的div移置下一行的div中还是不行，有没有其他的解决办法，在线求？

<style>
.box
display:flex;
width:1000px;
margin:0 auto;
background-color:#f4f4d0;

.box .left
flex:1 0 auto;

.box .left ul
width:140px;
margin:50px auto;
padding:0;

.box .left ul li
height:40px;
list-style-type:none;
background-color:#02b466;
color:#fff;
margin:2px 0;
line-height:40px;
text-align:center;

.box .right
flex:3 0 auto;
border-left:1px dotted #02b466;
padding:50px;

</style>
<div class="box">
<div class="left">
<ul>
<li>首页</li>
<li>个人介绍</li>
<li>兴趣爱好</li>
<li>心情故事</li>
<li>大学生活</li>
<li>设计作品</li>
<li>联系我们</li>
</ul>
</div>
<div class="right">
<p>你好</p>
<p>。。。。。。。。。。。。。。。。。</p>
<p>。。。。。。。。。。。。</p>
<p>。。。。。。。。。。。。。</p>
<p>。。。。。。。。。。。。。。。。。。</p>
</div>
</div> 参考技术A 可以使用弹性盒子或者浮动实现左右布局
弹性盒子
display:flex;
浮动
float:left;

如何使用 ReactJS 将图像正确放入 HTML 和 CSS 中的 div

【中文标题】如何使用 ReactJS 将图像正确放入 HTML 和 CSS 中的 div

【英文标题】：How to properly fit an image into a div in HTML and CSS using ReactJS

【发布时间】：2020-12-23 04:16:15

【问题描述】：

我即将完成一个小型船只图像数据库。正如您从下面的屏幕截图中看到的那样，我遇到的问题是，尽管我将 css 类固定为特定宽度，但卡片的尺寸都不同。我试图让所有卡片的宽度和高度都相同。我做错了什么？

下面这个问题相关代码的sn-p：

vessels.js

export default function Vessel( vessel ) 
    const  name, slug, images /* size */  = vessel;

    return (
        <div>
        <article className="room">
            <div className="img-container">
                <img src=images[0] || defaultImg  />
                <Link to=`/vessels/$slug` className="btn-primary">
                    Features
                </Link>
            </div>
        </article>
        </div>
    );

以及相关的App.css类：

.room 
    display: block;
    box-shadow: var(--lightShadow);
    transition: var(--mainTransition);
    
.img-container 
    position: relative;

.img-container img 
    width: 100%;
    display: block;
    transition: var(--mainTransition);

到目前为止我做了什么：

我一直在尝试研究并找出为什么会发生这种情况的问题，但无法理解我做错了什么。我咨询了this source，这似乎很清楚。我申请了，结果就是我发布的图片上的结果。

我也尝试在 css 上添加 height 属性，但这并没有改变问题

.img 容器 img 宽度：100%； 高度：100%； 显示：块； 过渡：var（--mainTransition）；

在某个时候，我怀疑这是visibility 的问题，但这也没有改变我遇到的问题。而且我认为这不是可见性属性的问题。

在我看来，有一个（可能的？）属性可以被覆盖？或者也许这不是问题。 感谢您指出如何解决此问题的正确方向。

【参考方案1】：

尝试使用 flexbox 和样式组件来实现您想要的设计。

例子：

import React from "react";
import styled from "styled-components";
import "./styles.css";

const BoatContainer = styled.div`
  display: flex;
  flex-flow: row wrap;
`;

const BoatImg = styled.img`
  width: 200px;
  margin: 5px;
`;

export default function App() 
  return (
    <div className="App">
      <h1>Behold: boats.</h1>
      <BoatContainer>
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
      </BoatContainer>
    </div>
  );

沙盒演示：https://codesandbox.io/s/stack-63731876-boats-e7onm

这里有一个方便的 flexbox CSS 技巧指南供参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

哈雷您好，感谢您光临并阅读问题。那是一个好主意！我会执行您的建议，并会尽快回复您！感谢您花时间回答！ :)