Python 如何放置文本&；图像并排使用CSS&；HTML_Python_Html_Css_Django

Python 如何放置文本&；图像并排使用CSS&；HTML

python html css django

Python 如何放置文本&；图像并排使用CSS&；HTML,python,html,css,django,Python,Html,Css,Django,对于我的Django项目，我希望将文本和图像并排对齐。但却无法实现。图像正在穿过父div框有人能帮我实现下面的结构，如下图所示。下面是我的一段HTML和CSS代码 <!DOCTYPE html> <html> <head> <title>AKS NAGG</title> <style> body { padding: 0;

对于我的Django项目，我希望将文本和图像并排对齐。但却无法实现。图像正在穿过父div框

有人能帮我实现下面的结构，如下图所示。下面是我的一段HTML和CSS代码

<!DOCTYPE html>
<html>
    <head>
        <title>AKS NAGG</title>
        <style>
            body {
                padding: 0;
                margin: 0;
            }
            .container{
                background: aqua;
                height: 100vh;
                display: flex;
            }
            .box{
                position: relative;
                margin:20px;
                margin-top: 40px;
                float: left;
                background: yellow;
                height:400px;
                width: 400px;
                border-radius: 10px;
                flex: 1;
                overflow-y: auto;
            }
            .items{
                position: relative;
                margin: 10px;
                padding: 10px;
                border: solid;
                border-width: 2px; 
                height: 100px;
                width: 400px;
            }
            .title{
                position: relative;
                width: 50%;
                border: dotted;
                float: left;
                flex: 50%;
            }
            .image{
                position: relative;
                float: right;
                clear: both;
                border-width: 2px;
                border: solid;
            }
            /* Clearfix (clear floats) */
            .row::after {
              content: "";
              clear: both;
              display: table;
            }
        </style>
    </head>

    <body>
        
        <div class='container'>
            
            <div class='box'>
                {% for t,l,i in data %}
                    <div class='items'>
                        <div class='title'>
                            <a href="{{l}}">{{t}}<a/> 
                        </div>
                        <div class='image'>
                            <a href="{{l}}"><img src="{{i}}"></a>
                        </div>
                    </div>
                                
                {% endfor %}
                
            </div>

            <div class='box'>
                Box2 
            </div>

            <div class='box'>
                Box3
            </div>

        </div>

    </body>
</html>


AKS纳格
身体{
填充：0；
保证金：0；
}
.集装箱{
背景：水；
高度：100vh；
显示器：flex；
}
.盒子{
位置：相对位置；
利润率：20px；
边缘顶端：40px；
浮动：左；
背景：黄色；
高度：400px；
宽度：400px；
边界半径：10px；
弹性：1；
溢出y：自动；
}
.项目{
位置：相对位置；
利润率：10px；
填充：10px；
边框：实心；
边框宽度：2倍；
高度：100px；
宽度：400px；
}
.头衔{
位置：相对位置；
宽度：50%；
边框：虚线；
浮动：左；
弹性：50%；
}
.形象{
位置：相对位置；
浮动：对；
明确：两者皆有；
边框宽度：2倍；
边框：实心；
}
/*Clearfix（清除浮动）*/
.行：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
{%t，l，i在数据%}
{%endfor%}
框2
框3

按照我当前的代码输出。图像在两个框之间重叠

在这里，您的图像可以通过planty of

display:flex进行调整。我在代码片段中添加了/**added**/以显示我在何处添加了您的工作
演示


AKS纳格
身体{
填充：0；
保证金：0；
}
.集装箱{
背景：水；
高度：100vh；
显示器：flex；
}
.盒子{
位置：相对位置；
利润率：20px；
边缘顶端：40px；
浮动：左；
背景：黄色；
高度：400px；
宽度：400px；
边界半径：10px；
弹性：1；
溢出y：自动；
}
.项目{
位置：相对位置；
利润率：10px；
填充：10px；
边框：实心；
边框宽度：2倍；
高度：100px；
宽度：400px；
显示：flex；/**已添加**/
}
.头衔{
位置：相对位置；
宽度：50%；
边框：虚线；
浮动：左；
flex:1自动；
}
.形象{
位置：相对位置；
浮动：对；
明确：两者皆有；
边框宽度：2倍；
边框：实心；
弹性：1；/**增加**/
显示：flex；/**已添加**/
}
.图a{
文本对齐：居中；/**已添加**/
}
.图像img{
最大宽度：100%；/**已添加**/
最大高度：100%；/**已添加**/
}
/*Clearfix（清除浮动）*/
.行：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
框2
框3
在这里，您的图像可以通过planty ofdisplay:flex进行调整。我在代码片段中添加了/**added**/以显示我在何处添加了您的工作
演示


AKS纳格
身体{
填充：0；
保证金：0；
}
.集装箱{
背景：水；
高度：100vh；
显示器：flex；
}
.盒子{
位置：相对位置；
利润率：20px；
边缘顶端：40px；
浮动：左；
背景：黄色；
高度：400px；
宽度：400px；
边界半径：10px；
弹性：1；
溢出y：自动；
}
.项目{
位置：相对位置；
利润率：10px；
填充：10px；
边框：实心；
边框宽度：2倍；
高度：100px；
宽度：400px；
显示：flex；/**已添加**/
}
.头衔{
位置：相对位置；
 .items {
  display: flex;
  width: 400px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 2px solid #333;
}

.title {
  flex-grow: 1;
  border: 2px dotted #333;
}

.image {
  flex-shrink: 0;
  border: 2px solid #333;
}