英文:
Image inside rounded Div with Text
问题
我正在制作一个圆角的 div，其中包含一个已经是圆角的图像，右侧有文本。
文本一直溢出了 div。而且，文本从 div 的中心开始。我希望它靠近图像。
如您所见的图片：图像离边缘不够近，文本离图像很远。
这是我尝试做的：
<div class="container2">
<div class="image-container">
<img src="test.svg" alt="Image" />
</div>
<div class="text-container">
<p>文本。</p>
</div>
</div>
.container2 {
padding-top: 20px;
height: 140px;
background: #FFFFFF;
box-shadow: 3px 3px 7px #00000029;
border-radius: 94px;
opacity: 1;
display: flex;
}
.image-container {
flex: 1;
overflow: hidden;
}
.image-container img {
padding: 4px;
width: 60%;
height: 100%;
}
.text-container {
flex: 1.5;
padding: 10px;
overflow: hidden;
word-wrap: break-word;
}
英文:
I was making a rounded div , with an image (already rounded) with text on the right side.
The text keeps overflowing the div . Also , the text is starting from the center of the div . I want it to be close to the image .
As you can see the picture : the image is not close to the edge , and the text is far from the image .
This is what I tried to do :
<div class="container2">
<div class="image-container">
<img src="test.svg" alt="Image" />
</div>
<div class="text-container">
<p>Text.</p>
</div>
</div>
.container2 {
padding-top:20px;
height: 140px;
background: #FFFFFF;
box-shadow: 3px 3px 7px #00000029;
border-radius: 94px;
opacity: 1;
display: flex;
}
.image-container {
flex: 1;
overflow: hidden;
}
.image-container img {
padding: 4px;
width: 60%;
height: 100%;
}
.text-container {
flex: 1.5;
padding: 10px;
overflow: hidden;
word-wrap: break-word;
}
答案1
得分: 0
这是你想要的设计示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
body,html {
width:100%;
height:100%;
}
.container {
width:100%;
height:100%;
display:flex;
justify-content:center;
}
.wrapper {
min-width:90%;
height:60px;
box-shadow:2px 2px 12px 2px #efefef;
border-radius:50px;
margin:10px;
display:flex;
align-items:center;
padding:12px;
overflow: hidden;
}
.wrapper .image {
min-width:60px;
height:60px;
border-radius:50%;
}
.image img {
width:100%;
height:100%;
border-radius:50%;
}
.wrapper .text {
margin:12px;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="image">
<img src="../images/favicon.png">
</div>
<div class="text">
<p>Hello Mcdonalds triad again</p>
</div>
</div>
</div>
</body>
</html>
这是你的代码应该结构化的方式，它使用了 flexbox，有助于确保你的代码整齐有序，并且可以轻松排列和移动元素。同时，请用你自己的图片替换图像。为了防止溢出，如果你希望用户输入文本，你可能需要使用JavaScript或其他技术来限制文本输入。
英文:
This is an example of the design your going for:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
body,html {
width:100%;
height:100%;
}
.container {
width:100%;
height:100%;
display:flex;
justify-content:center;
}
.wrapper {
min-width:90%;
height:60px;
box-shadow:2px 2px 12px 2px #efefef;
border-radius:50px;
margin:10px;
display:flex;
align-items:center;
padding:12px;
overflow: hidden;
}
.wrapper .image {
min-width:60px;
height:60px;
border-radius:50%;
}
.image img {
width:100%;
height:100%;
border-radius:50%;
}
.wrapper .text {
margin:12px;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="image">
<img src="../images/favicon.png">
</div>
<div class="text">
<p>Hello Mcdonalds triad again</p>
</div>
</div>
</div>
</body>
</html>
This is how your code should be structured, it's using flexbox and it'll help make sure your code is neatly organized and that you have easy access to arrange and move around elements. Also, replace the image with yours. To stop overflowing, you might want to limit the text input, if you want to use it for users to input, you'll need to use javascript or some other techniques to limit the text input.
答案2
得分: 0
.container2 {
padding-top: 20px;
height: 140px;
background: #FFFFFF;
box-shadow: 3px 3px 7px #00000029;
border-radius: 100svh;
opacity: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
/* Increase gap value to make space between image and text*/
padding: .5rem;
}
.image-container {
padding: 4px;
height: 90%;
overflow: hidden;
}
.image-container img {
height: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
}
.text-container {
flex: 1;
padding-right: 10px;
overflow: hidden;
word-wrap: break-word;
}
<div class="container2">
<div class="image-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEsQLvSHMFPa9yV2y_i9ifBdBA-vuFedWFHFLjUrDVB1OW1gppTwzM45Rl-l1yw09WtHs&usqp=CAU" alt="Image" />
</div>
<div class="text-container">
<p>Nous construisons des architectures basées sur le Cloud, qui vous fournissent sécurité et adaptabilité afin de surmonter les défis communs qui découlent d'architectures rigides ou obsolétes.</p>
</div>
</div>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container2 {
padding-top: 20px;
height: 140px;
background: #FFFFFF;
box-shadow: 3px 3px 7px #00000029;
border-radius: 100svh;
opacity: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
/* Increase gap value to make space between image and text*/
padding: .5rem;
}
.image-container {
padding: 4px;
height: 90%;
overflow: hidden;
}
.image-container img {
height: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
}
.text-container {
flex: 1;
padding-right: 10px;
overflow: hidden;
word-wrap: break-word;
}
<!-- language: lang-html -->
<div class="container2">
<div class="image-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEsQLvSHMFPa9yV2y_i9ifBdBA-vuFedWFHFLjUrDVB1OW1gppTwzM45Rl-l1yw09WtHs&usqp=CAU" alt="Image" />
</div>
<div class="text-container">
<p>Nous construisons des architectures basées sur le Cloud, qui vous fournissent sécurité et adaptabilité afin de surmonter les défis communs qui découlent d'architectures rigides ou obsolétes..</p>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论