0
これをどのように言いたいのか分かりませんので、もっと必要な情報があれば教えてください。テキストが別のdivに折り返されていない
私のウェブサイトの連絡先ページには、連絡先情報を含むdiv（「left」と呼ばれる）があります。別のdiv（「テキスト」と呼ばれる）は、テキストのいくつかの段落を含み、「左」divの右側にあります。 "left" divは30％幅に、 "text" divは70％widthに設定されています。私は、 "text" divが小さくなるにつれて（windowがサイズ変更されると）、 "text" div内のテキストが下に折り返されると予想しましたが、両方のdiv内の内容が接触すると、 "text" divが下に下がります「左」のdiv。
理由は何ですか？ページのレイアウトを表示するために、下の画像を追加しました。また、これらのdivに関連するHTMLとCSS。ありがとう。現在のところ、ウィンドウのサイズが小さくなるにつれて、メディアクエリを使って "text" divのサイズを変更するだけで、 "left" divには決して触れませんが、これは厄介です。
.body-container {
width: 70%;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, -0%);
-moz-transform: translate(-50%, -0%);
}
@media screen and (max-width: 1300px) {
.body-container {
width: 80%;
}
}
@media screen and (max-width: 1150px) {
.body-container {
width: 85%;
}
}
@media screen and (max-width: 1000px) {
.body-container {
width: 90%;
}
}
@media screen and (max-width: 767px) {
.body-container {
width: 95%;
}
}
.profile {
padding: 0;
margin: 0;
}
.profile img {
margin: 100px 0 0 0;
padding: 0;
width: 200px;
height: 200px;
opacity: 0.9;
border: 3px solid white;
border-radius: 100px;
float: left;
}
.details {
margin: 310px 0 0 -200px;
padding: 0;
color: white;
float: left;
font-size: 15px;
font-weight: bold;
}
form {
padding: 0;
margin: -10px 0 0 0;
float: left;
}
label {
display: block;
margin: 10px 0 0 0;
padding: 0;
font-weight: bold;
font-size: 15px;
}
input {
width: 200px;
border: 1px solid #D8D8D8;
color: #585858;
border-radius: 3px;
-webkit-border-radius: 3px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid #D8D8D8;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #585858;
resize: none;
}
.submit {
opacity: 0.9;
background-color: lightgray;
position: absolute;
margin: 115px 0 0 -200px;
}
.submit:hover {
opacity: 1.0;
}
.left {
width: 246px;
position: fixed;
}
.name {
margin: 0;
font-family: Advent Pro;
font-size: 40px;
font-weight: 400;
}
.text {
margin: 100px 0 0 0;
padding: 0;
float: right;
text-align: left;
color: white;
font-size: 15px;
font-weight: 500;
width: 70%;
}
@media screen and (max-width: 850px) {
.text {
width: 65%;
}
}
@media screen and (max-width: 650px) {
.text {
width: 60%;
}
}
@media screen and (max-width: 550px) {
.text {
width: 55%;
}
}<div class="body-container">
<div class="left">
<div class="profile">
<img src="images/profile.png" />
</div>
<div class="details">
<p class="name">Tim Corin</p>
<p>Phone: 12 3456 7890</p>
<p>Mobile: 123 456 7890</p>
<p>Email: [email protected]</p>
<p>Contact Form:</p>
<form method="post" action="index.php">
<label>Name</label>
<input name="name" />
<label>Email</label>
<input name="email" type="email" />
<label>Message</label>
<textarea name="message"></textarea>
<input class="submit" name="submit" type="submit" value="send">
</form>
</div>
</div>
<div class="text">
<p>I'm so glad you discovered my work! This could be the start of a fantastic adventure, as I capture your special moments. First, let me share a little about myself...</p>
<p>I like to think that I'm a friendly, fun-loving, and creative person. My photographic journey began in 2011, when I received a camera for my 13th birthday. Within the first year, the sensor was covered in dust. But it served me for almost three years,
and most importantly, it lit the photographic flame that's been burning ever since.</p>
<p>My family loves to travel. I've lived in Japan, New Zealand, and Australia. I've travelled uncountable miles in Australia, traversing the countryside from Brisbane to the tip of Cape York.</p>
<p>Where am I now? Julatten, where life is nothing short of spectacular. Rolling green hills, beautiful cool breezes, and exotic wildlife. It's almost paradise, the perfect spot for a keen photographer.</p>
<p>I'm a two-time Mossman Show Under-18 Photography Champion. This year, I was named Reserve Champion Photographer at the Mossman Show.</p>
<p>I love shooting everything, though my main interests are nature and events. If I sound like your kind of photographer, please contact me!</p>
</div>
</div>
ありがとうございました！私はそれを試してみたと思ったが、私はしていないようだ。私はまた、すべてのメディアのクエリと位置を取り出した：固定、あなたの答えは、問題の大部分を解決:)） –
あなたはようこそ！ – NPN