Home > Article > Web Front-end > All assets 70 points help div css problem_html/css_WEB-ITnose
All assets 70 points help div css problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:001105browse
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="top.aspx.cs" Inherits="top" %><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/jscript" src="jsinc/MdiWin.js"></script><title>top</title> <style type="text/css"> .all { left :0px; top: 0px; height: 66px; width: 100%; } #imglogo { left :0px; top: 0px; height: 66px; width: 213px; } </style></head><form id="top" runat="server"><body><div class="all" > <div id="imglogo"><img alt="logo" src="images/logo.jpg" /></div></div></body></form></html> The display effect is like this
Now there is a div
with the content:
<div> <a href="#" target="_blank" >反馈建议</a> | <a href="">帮助中心</a> | <a href="#" >退出</a></div>
I want it to appear in class=" "all" in the upper right corner of the div, and no matter how the window changes, this div will always be in the upper right corner. How should I write this?
The effect you want to achieve is like this
Reply to the discussion (solution)
.all {position:fixed}
If it is to appear In the upper right corner of the all div, use absolute positioning. Define the all div as relative or absolute, then set the upper right div to absolute, and then set the top and right values. I don’t know if this is what you want
You don’t need to specify the address. What I want is that no matter how the window changes, the div should always be in the upper right corner
. The original poster specified that left and top are the same. This place is only used for positioning. So if you use absolute positioning, use position: to set it. If you don’t want to use absolute positioning, use float to float. There is no need to set left top
The complete code is as follows:
7db10be2c59fb21fe192709716486031
93f0f5c25f18dab9d176bd4f6de5d30e
36fc0da5a553527cb1d2a9551dbb853b
b2386ffb911b14667cb8f0f91ea547a7Untitled Document< ;/title>
c9ccee2e6ea535a969eb3f532ad9fe89
.imglogo
{
width:100%;d0d6685816571bfa31516757ae335ccd
margin:2px auto;
}
.topInfo
{
width:100%;2ff7cbf69964a73baaf2dcfd1ce2c0af
margin:0px auto;
}
img
{
border: 1px solid #ccc;
}
body
{
font:"宋体" 15px;
color:red;
}
A:link {
COLOR: red; TEXT-DECORATION: none
}
A:visited {
COLOR: red; TEXT-DECORATION: none
}
A:hover {
COLOR: red; TEXT- DECORATION: none
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
40c38e2c0e0eb262ddcc571282c72ae2Feedback & Suggestions5db79b134e9f6b82c0b36e0489ee08ed | ee7959cc8dd4be16ef633321c03dac32Help Center5db79b134e9f6b82c0b36e0489ee08ed | ee7959cc8dd4be16ef633321c03dac32 Exit5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68
592fe267975b46ad5981cb77d8d8fa3cd73066c59691e5b635bef322209ec301
69ae09989fa9781a83812193dd39fa1b
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
Remember to add points~~~~
The complete code is as follows:
828aa372422c07836de21594ce86fe2f
93f0f5c25f18dab9d176bd4f6de5d30e
36fc0da5a553527cb1d2a9551dbb853b
b2386ffb911b14667cb8f0f91ea547a7None Title document6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
.imglogo
{
width:...
No, this picture and feedback suggest those wrong lines
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>top</title> <style type="text/css"> .all { left :0px; top: 0px; height: 66px; width: 100%; } #imglogo { left :0px; top: 0px; height: 66px; width: 213px; } .all { float: left; } .navbar-fixed-top{ top:5px; position: fixed;; right: 10px; z-index: 1030; margin-bottom: 0px; } .topright{ clear: both; float:right; } </style></head><body><form id="top" runat="server"> <div class="all" > <div id="imglogo"><img alt="logo" src="images/logo.jpg" /></div> </div></form><div class="navbar-fixed-top"> <div class="topright"> <a href="#" target="_blank" >反馈建议</a> | <a href="">帮助中心</a> | <a href="#" >退出</a> </div></div><div> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p></div></body></html> See if it is what you want
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#top { width:100%; margin:0; padding:0;}#sitelogo { float:left; width:240px;}#top-r { float:right; width:70%; min-width:660px; height:66px;}#top-r .meta { text-align:right;}</style></head><body><div id="top"> <div id="sitelogo"> 自己塞图片 </div> <div id="top-r"> <p class="meta"><a href="#">测试</a> | <a href="#">测试</a> | <a href="#">测试</a> | <a href="#">测试</a></p> </div></div></body></html> Quoting the reply from wxiaocong on the 5th floor: The complete code is as follows:
df024e60d2c6fc8981a418f34ab83fde
93f0f5c25f18dab9d176bd4f6de5d30e
ecbab722867549660334522fbd037db3
b2386ffb911b14667cb8f0f91ea547a7Untitled Document6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
……
I don’t understand what you mean, you want them to be in the same div Should the logo and the text on the right be displayed in it, or should they be displayed in two divs? If it's the first case, you can add a table to a div, with the logo on the left and the text on the right. If it's the second case, my above code will do, and you can modify the margin at most. Personally, I think it’s the second type of table, so that there can be an advertising column to the right of the logo