【发布时间】：2021-04-26 14:43:39
【问题描述】：
我正在尝试在内部 div（在本例中为图像）中插入内容，但是尽管设置了容器 div（flex 容器）的最大宽度和宽度以及最大高度和高度，内部 div仍然在覆盖其他元素的边界之外（在它自己的 div 之外）。
如何确保我放入 div 中的任何内容都不会超出我使用 CSS 或 HTML 分配给它的最大区域？
在这种情况下，当我从左侧导航栏中单击我的消息时，这就是我得到的：
const ProfileForm = document.getElementsByClassName('profile_container');
const dash = document.getElementsByClassName('dashboard_buttons');
var index;
var array = [];
for (var i = 0; i < dash.length; i++) {
array.push(dash[i]);
dash[i].onclick = function() {
index = array.indexOf(this);
ProfileForm[index].style.display = "block";
var check = ProfileForm[index];
for (var i = 0; i < ProfileForm.length; i++) {
if (ProfileForm[i].style.display == "block" && ProfileForm[i] != check) {
ProfileForm[i].style.display = "none";
}
}
}
} @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
* {
margin: 0;
padding: 0;
/* border: thick solid blue;*/
font-family: 'Roboto', sans-serif;
}
html {
height: 100%;
/*border: thick solid yellow;*/
}
body {
height: 100%;
/* width: 100%;*/
display: flex;
flex-direction: column;
/*border: thick solid red;*/
visibility: visible;
/*background-color: #003580;*/
}
/*BUTTON BACKGROUND COLORS*/
.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
background-color: #febb02;
}
/*BUTTON HOVER COLORS*/
.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
background: #003580;
color: white;
}
/* BUTTON FONT COLORS*/
.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
color: black;
}
a {
text-decoration: none;
}
.logo {
/*border: thick dotted blue;*/
width: 120px;
margin-top: -33%;
margin-bottom: -33%;
/*border-radius:50%;*/
}
/* HEADER START */
header {
display: flex;
/* border: thick solid red;*/
justify-content: center;
border-bottom: thin solid black;
padding: 9px;
background-color: #003580;
}
/* HEADER LEFT SIDE */
.header_left_container {
display: flex;
flex: 1;
/* border: thick solid yellow;*/
justify-content: center;
}
.header_left_container_inner_left {
/* border: thick solid green;*/
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
.header_left_container_inner_right {
/* border: thick solid green;*/
display: flex;
flex: 5;
align-items: center;
justify-content: flex-start;
}
/* HEADER RIGHT SIDE */
.header_right_container {
display: flex;
flex: 3;
/* border: thick solid yellow;*/
justify-content: center;
}
.header_right_container_inner_left {
display: flex;
/* border: thick solid green;*/
flex: 4;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
}
li {
/* display:inline;*/
padding: 10px;
}
a {
display: flex;
flex-wrap: nowrap;
color: white;
font-size: 12px;
}
.search_input_input {
flex: 1;
color: white;
background-color: #003580;
margin: 0;
border: 0;
border-radius: 6px;
font-size: 15px;
font-weight: 333;
height: 45px;
text-align: center;
resize: none;
outline: none;
cursor: pointer;
width: 99px;
}
.search_input_widget {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
color: white;
background-color: #003580;
margin: 0;
padding-left: 6%;
border: 0;
text-align: center;
cursor: pointer;
width: 120px;
}
.header_right_container_inner_left_list {
display: flex;
flex: 1;
justify-content: flex-end;
list-style-type: none;
}
.header_right_container_inner_center {
display: flex;
/* border: thick solid green;*/
flex: 1;
justify-content: flex-end;
}
.header_right_container_inner_center_button {
display: flex;
align-items: center;
/* background-color: #E00000;*/
border: 1px solid #003580;
border-radius: 6px;
padding: 0 25px;
margin-left: 12px;
/* color: white;*/
font-size: 15px;
font-weight: 333;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
resize: none;
outline: none;
}
.header_right_container_inner_right {
display: flex;
/* border: thick solid green;*/
flex: 1;
justify-content: center;
}
.header_right_container_inner_right_button {
display: flex;
align-items: center;
background-color: #febb02;
border: 1px solid #003580;
border-radius: 6px;
padding: 0 25px;
margin-left: 12px;
color: black;
font-size: 15px;
font-weight: 333;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
resize: none;
outline: none;
}
select.select_city_header {
border: 1px solid #fff;
/* background-color: rgba(255,255,255,.5);*/
padding: 5px;
margin-left: 15px;
background-color: #003580;
color: white;
font-size: 12px;
}
.main_dashboard_container {
display: flex;
flex-wrap: nowrap;
/* color: white;*/
/*border: thick solid red;*/
}
.left_navbar {
height: 90vh;
flex: 1;
background-color: #003580;
border-bottom: 6px solid #003580;
}
.dashboard_buttons {
font-family: 'Lato', sans-serif;
padding: 12px 50px;
font-size: 16px;
font-weight: 500;
border-bottom: thin solid black;
cursor: pointer;
background-color: #003580;
color: white;
}
.dashboard_buttons:hover {
background-color: #39CCCC;
color: white;
}
.dashboard_right_container_wrap {
position: absolute;
/*margin-top: 21%;*/
overflow: auto;
}
.right_content {
flex: 4;
background-color: white;
display: flex;
justify-content: center;
align-items: flex-end;
/*margin-top: 1467px;*/
}
.profile_container {
border: thick dotted yellow;
margin-bottom: 18%;
/*position: absolute;*/
display: flex;
flex-direction: column;
/*justify-content: flex-start;*/
/*align-items: center;*/
}
.profile_title {
border: thick dotted red;
flex: 1;
text-align: center;
font-size: 33px;
font-weight: 333;
color: #003580;
padding: 12px;
}
.profile_form {
border: thin solid #003580;
display: flex;
flex-direction: column;
/*align-items: flex-start;*/
width: 666px;
height: auto;
}
.profile_internal_container {
border: thin solid #003580;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
padding: 6px;
}
.label_profile_form {
/*border: thick solid green;*/
width: 120px;
}
.input_profile_form {
/*border: thick solid green;*/
width: 160px;
/*text-align: center;*/
align-self: center;
font-size: 15px;
font-weight: 333;
text-decoration: none;
cursor: pointer;
resize: none;
outline: none;
border: transparent;
margin-left: 33px;
}
#inp,
#inp2 {
/*text-align: center;*/
margin: auto;
width: 240px;
}
.profile_form_dropdown {
font-size: 15px;
font-weight: 333;
/*text-align-last:center;*/
border: 0;
margin: 0;
margin-left: 33px;
}
.profile_save_button_container {
display: flex;
justify-content: center;
align-items: center;
}
.profile_save_button {
border: thin solid #003580;
background-color: #003580;
color: white;
width: 180px;
height: 45px;
border-radius: 6px;
padding: 0 25px;
margin: 33px;
font-size: 15px;
font-weight: 333;
cursor: pointer;
resize: none;
outline: none;
text-align: center;
}
.profile_save_button:hover {
background-color: #39CCCC;
border: thin solid #39CCCC;
color: white;
}
.ul_flex {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.my_properties_container {
position: absolute;
}
.properties_dashboard {
border: thick dotted green;
flex: 1;
width: 666px;
max-width: 666px;
height: 350px;
max-height: 350px;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: flex-start;
align-content: space-around;
}
.utilities_elements,
.utilities_image {
/*border: thin solid red;*/
max-width: 250px;
max-height: 150px;
padding: 15px;
cursor: pointer;
}
.properties_dashboard_container {}
.properties_detail_widget {
border: thin dotted #003580;
display: flex;
justify-content: space-around;
align-items: center;
/*border: thin solid red;*/
flex-wrap: nowrap;
}
.property_details {
margin-left: -6px;
padding: 6px;
font-size: 12px;
font-weight: 333;
text-align: center;
}
.properties_detail_label {
margin-left: 6px;
padding: 6px;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.prop_detail {
max-width: 450px;
max-height: 250px;
margin: 33px;
border: thick solid #003580;
}
.property_image_wrapper {
display: flex;
justify-content: space-around;
align-items: center;
}
.msg_image_wrapper {
border: thick dotted purple;
display: flex;
justify-content: space-around;
align-items: center;
}
.msg_image {
border: thick dotted gray;
max-width: 666px;
max-height: 666px;<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/jpg" href="images/33.png" />
<meta charset="UTF-8">
<!-- <meta http-equiv="refresh" content="3" >-->
<link rel="stylesheet" href="styles.css">
<link href="/css/all.css" rel="stylesheet">
<!--load all styles -->
<title>Index</title>
</head>
<body id="body">
<! -- HEADER START -->
<header>
<! -- HEADER LEFT SIDE CONTAINER START -->
<div class="header_left_container">
<div class="header_left_container_inner_left">
<img class="logo" src="images/1.png" alt="">
</div>
<div class="header_left_container_inner_right">
<form action="">
<select class="select_city_header" name="emirate" id="emirate" style="border: 0;">
<option value="prague">Prague</option>
</select>
</form>
</div>
</div>
<! -- HEADER LEFT SIDE CONTAINER STOP -->
<! -- HEADER RIGHT SIDE CONTAINER START -->
<div class="header_right_container">
<div class="header_right_container_inner_left">
<ul class="header_right_container_inner_left_list">
<li><a href="#" style="text-decoration: none;">Residential</a></li>
<li><a href="#" style="text-decoration: none">Commercial</a></li>
<li><a href="#" style="text-decoration: none">Room</a></li>
<li><a href="#" style="text-decoration: none">Short-Term</a></li>
<!--I'll put in this 2 icons, monthly and daily-->
<li><a href="#" style="text-decoration: none"><i class="far fa-envelope" style="padding-right:9px;"></i>Inbox</a></li>
</ul>
<div class="search_input_widget">
<i class="fas fa-search" style="padding-right:9px;"></i>
<input type="text" placeholder="Search" class="search_input_input">
</div>
</div>
<div class="header_right_container_inner_center">
<button class="header_right_container_inner_center_button">Login</button>
</div>
<div class="header_right_container_inner_right">
<button class="header_right_container_inner_right_button">Place Your Ad</button>
</div>
</div>
<! -- HEADER RIGHT SIDE CONTAINER STOP -->
</header>
<! -- HEADER STOP -->
<div class="main_dashboard_container">
<div class="left_navbar">
<div class="sub">
<ul class="ul_flex">
<li class="dashboard_user_widget"><span class="span" style="min-height:350px;"> </span></li>
<li class="dashboard_buttons" id="profile_id"><i class="far fa-user" style="padding-right:9px;"></i>Profile</li>
<li class="dashboard_buttons" id="properties_id"><i class="far fa-list-alt" style="padding-right:9px;"></i>My Properties</li>
<li class="dashboard_buttons" id="bids_id"><i class="far fa-money-bill-alt" style="padding-right:9px;"></i>My Offers</li>
<li class="dashboard_buttons" id="utilities_id"><i class="fas fa-file-contract" style="padding-right:9px;"></i>My Utilities & Ejari</li>
<li class="dashboard_buttons" id="favourite_id"><i class="far fa-heart" style="padding-right:9px;"></i>Favourite Properties</li>
<li class="dashboard_buttons" id="messages_id"><i class="far fa-envelope" style="padding-right:9px;"></i>Messages</li>
<li class="dashboard_buttons" id="settings_id"><i class="fas fa-cogs" style="padding-right:9px;"></i>Settings</li>
</ul>
</div>
</div>
<div class="right_content">
<div class="dashboard_right_container_wrap" style="position:absolute;">
<div class="profile_container" id="profile_container" style="display:none">
<!-- style="visibility: hidden;"-->
<h4 class="profile_title">My Profile</h4>
<form class="profile_form" id="profile_form">
<div class="profile_internal_container">
<label for="name" style="color: black;" class="label_profile_form">Name:</label>
<input type="text" id="name" placeholder="Name" class="input_profile_form">
<input type="text" placeholder="Family Name" class="input_profile_form">
</div>
<div class="profile_internal_container">
<label for="nationality" style="color: black;" class="label_profile_form">Nationality:</label>
<select id="nationality" class="profile_form_dropdown">
<option value="">Italy</option>
<option value="">Germany</option>
</select>
</div>
<div class="profile_internal_container">
<label for="day" style="color: black;" class="label_profile_form">Date of birth:</label>
<select id="day" class="profile_form_dropdown">
<option value="">22</option>
<option value="">21</option>
</select>
<select class="profile_form_dropdown">
<option value="">December</option>
<option value="">January</option>
</select>
<select class="profile_form_dropdown">
<option value="">1984</option>
<option value="">2021</option>
</select>
</div>
<div class="profile_internal_container">
<label for="phone" style="color: black;" class="label_profile_form">Phone number:</label>
<input type="number" id="phone" placeholder="+97150...." class="input_profile_form">
</div>
<div class="profile_internal_container">
<label for="email" style="color: black;" class="label_profile_form">Email:</label>
<input type="email" id="email" placeholder="email" class="input_profile_form">
</div>
<div class="profile_internal_container">
<label for="password" style="color: black;" class="label_profile_form">Password:</label>
<input type="password" id="password" placeholder="*******" class="input_profile_form">
</div>
<div class="profile_internal_container">
<label for="passport" style="color: black;" class="label_profile_form">Passport:</label>
<input type="text" id="passport" placeholder="Type Passport Number" class="input_profile_form">
<input type="file" id="inp" class="input_profile_form">
</div>
<div class="profile_internal_container">
<label for="eid" style="color: black;" class="label_profile_form">Emirates ID:</label>
<input type="password" id="eid" placeholder="Type EID Number" class="input_profile_form">
<input type="file" id="inp2" class="input_profile_form">
</div>
</form>
<div class="profile_save_button_container">
<button class="profile_save_button">Save</button>
</div>
<!-- TODO all this part should first be autofilled with the user details and become a form exclusively if editing is needed-->
</div>
<div class="profile_container" id="my_properties_container" style="display:none">
<h4 class="profile_title">My Properties</h4>
<div class="properties_dashboard_container">
<div class="properties_detail_widget">
<label class="properties_detail_label" for="address">Address:</label>
<div class="property_details" id="address">Dubai Marina, Emaar Six Tower, Apt.1305</div>
<label class="properties_detail_label" for="status">Status:</label>
<div class="property_details" id="status" style="color:lawngreen; font-weight: bold">Rented</div>
<label class="properties_detail_label" for="expiry">Expires:</label>
<div class="property_details" id="expiry">17 Mar 2022</div>
<label class="properties_detail_label" for="more_details">More:</label>
<div class="property_details" id="more_details">More Details</div>
<!-- TODO all this part must be retrieved automatically from the database-->
</div>
<div class="property_image_wrapper">
<img src="images/prop.jpg" class="prop_detail">
</div>
</div>
</div>
<div class="profile_container" id="my_bids" style="display:none">
<!-- style="visibility: hidden;"-->
<h4 class="profile_title">My Bids</h4>
<div class="properties_dashboard">
</div>
</div>
<div class="profile_container" id="my_utilities" style="display:none">
<!-- style="visibility: hidden;"-->
<h4 class="profile_title">My Utilities</h4>
<div class="properties_dashboard">
<div class="utilities_elements">
<img class="utilities_image" src="images/Utilities Logos/dewa.png">
</div>
<div class="utilities_elements">
<img class="utilities_image" src="images/Utilities Logos/du.png">
</div>
<div class="utilities_elements">
<img class="utilities_image" src="images/Utilities Logos/etisalat.png">
</div>
<div class="utilities_elements">
<img class="utilities_image" src="images/Utilities Logos/empower.png">
</div>
<div class="utilities_elements">
<img class="utilities_image" src="images/Utilities Logos/ejari.png">
</div>
<div class="utilities_elements">
</div>
</div>
</div>
<div class="profile_container" id="my_favourites" style="display:none">
<!-- style="visibility: hidden;"-->
<h4 class="profile_title">My Favourites</h4>
<div class="properties_dashboard">
</div>
</div>
<div class="profile_container" id="my_messages" style="display:none">
<!-- style="visibility: hidden;"-->
<h4 class="profile_title">My Messages</h4>
<div class="properties_dashboard">
<div class="msg_image_wrapper">
<img src="images/msg.PNG" class="msg_image">
</div>
</div>
</div>
<div class="profile_container" id="my_settings" style="display:none">
<!-- style="visibility: hidden;"-->
<h4 class="profile_title">My Settings</h4>
<div class="properties_dashboard">
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>?
【问题讨论】：
-
试试 .profile_container img { max-width: 100% }
-
试过了，还是不行，图片还是超出范围
-
我在你的代码中没有看到任何图像，你能更新一下吗？