我正在尝试制作一个文本向左浮动而图像向右浮动的页面。我做到了这一点,但我的网页图像和文本需要能够正确调整大小。 css 中的宽度和宽度对我不起作用,这与我的主页不同,所以我想知道是否有人可以修复它。
<section>
<div id="right">
<img src="../img/placeholder.png" alt="Photo of --">
<p>--</p>
</div>
<p id="left">Web and Graphic Designer beginner,<wbr>blah blah.</p>
</section>
和 css(为了以防万一,我包含了所有内容,但最相关的部分是底部的 PAGE PORTFOLIO):
/*ABOUT CSS*/
/*GENERAL*/
body {
}
ul {
list-style: none;
}
/*section*/
section {
max-width: 940px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
margin: 0 auto;
padding: 0;
color: gray;
}
/*all styling*/
* {
background-color: #f2f2f2;
}
/*all links*/
a {
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
color: gray;
}
/*visited links and hover links*/
a:visited {
color: #838383;
}
a:hover {
font-size:105%;
}
/*HEADING*/
/*header*/
h1 {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
line-height: 0.5em;
color: #8c8c8c;
width: 100%;
}
/*subhead*/
h2 {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
color: #8c8c8c;
width: 100%;
}
/*NAVIGATION*/
nav {
text-align: center;
padding: 10px 0;
}
/*horizontal nav*/
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 2% 2%;
}
/*FOOTER*/
footer {
font-size:0.75em;
text-align: center;
clear: both;
}
/*social media*/
footer {
text-align: center;
margin: 0 5px;
padding: 15px 15px;
}
#twitter img {
width: 46px;
height: 37px;
margin: 0 auto;
padding: 15px 15px;
}
#facebook img {
width: 40px;
height: 40px;
margin: 0 auto;
padding: 15px 15px;
}
/*PAGE PORTFOLIO*/
#right {
float: right;
width: 40%;
height: 40%;
}
#left {
float: left;
}
最佳答案
关于html - <wbr> 和图像缩放有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38321580/