标签: responsive

我有2个div:一个在左侧,一个在我的页面右侧.左侧的那个有固定的宽度,我希望右侧的一个填充剩余的空间.

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }

<div id="search">Text</div>
<div id="navigation">Navigation</div>

无论其内容如何.

是否有可能做到这一点？

我有一个使用React组件的复杂网页,我试图将页面从静态布局转换为响应更快,可调整大小的布局.但是,我一直遇到React的限制,我想知道是否有处理这些问题的标准模式.在我的特定情况下,我有一个组件呈现为带有display的div:table-cell和width:auto.

不幸的是,我无法查询我的组件的宽度,因为你无法计算元素的大小,除非它实际放在DOM中(它具有用于推导实际渲染宽度的完整上下文).除了将它用于相对鼠标定位之类的东西之外,我还需要这个来正确设置组件内SVG元素的宽度属性.

此外,当窗口调整大小时,如何在安装过程中将大小更改从一个组件传递到另一个组件？我们在shouldComponentUpdate中执行所有第三方SVG渲染,但您无法在自己或该方法中的其他子组件上设置状态或属性.

有没有一种使用React处理这个问题的标准方法？

我目前正在为一家公司开发移动登陆页面.这是一个非常基本的布局,但在标题下面有一个产品的图像,它总是100%宽度(设计显示它总是从边缘到边缘).根据屏幕的宽度,图像的高度显然会相应调整.我最初使用img(CSS宽度为100%)做了这个并且效果很好但是我意识到我想使用媒体查询来根据不同的分辨率提供不同的图像 - 比方说小,中等例如,同一图像的大版本.我知道你不能用CSS改变img src所以我想我应该使用CSS背景作为图像而不是HTML中的img标签.

我似乎无法正常工作,因为带背景图像的div需要宽度和高度来显示背景.我显然可以使用'width:100%',但我对高度有什么用？我可以像150px一样随机固定高度然后我可以看到图像的前150px,但这不是解决方案,因为没有固定的高度.我有一个游戏,发现一旦有高度(用150px测试),我可以使用'background-size:100%'来正确地将图像放入div中.我可以在这个项目中使用最新的CSS3,因为它仅针对移动设备.

我在下面添加了一个粗略的例子.请原谅内联样式,但我想给出一个基本的例子,试着让我的问题更清晰一些.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

我是否可能必须根据整个页面给容器div一个百分比高度,或者我看到这个完全错误？

另外,你认为CSS背景是最好的方法吗？也许有一种技术可以根据设备/屏幕宽度提供不同的img标签.一般的想法是,着陆页模板将使用不同的产品图像多次,因此我需要确保以最佳方式开发.

我很抱歉这是一个有点啰嗦,但我从这个项目来回到下一个,所以我想完成这个小事.在此先感谢您的时间,非常感谢.问候

我想知道在React app中实现布局的最佳方法是什么.

基本

假设我们想要在简单的网格中布置4个组件.最基本的方式是这样的.

<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
  <A color="red" x={0} y={0} width={width/2} height={height/2} />
  <B color="blue" x={width/2} y={0} width={width/2} height={height/2} />
  <B color="green" x={0} y={height/2} width={width/2} height={height/2} />
  <A color="yellow" x={width/2} y={height/2} width={width/2} height={height/2} />
</svg>

http://codepen.io/anon/pen/OWOXvV?editors=0010

它可以正常工作,但键入显式大小值容易出错并且不适合开发人员.如果我们可以使用百分比值(0 - 1),该怎么办？

简单的容器

const Container = ({x, y, width, height, children}) => {
  return (
    <g transform={`translate(${x}, ${y})`}>
      {React.Children.map(children, (child) => React.cloneElement(child, { // this creates a copy
        x: child.props.x * width,
        y: child.props.y * height,
        width: child.props.width …

我刚开始在一个网站上,我已经遇到一个小问题,我找不到具体的解决方案.

我想让我的网站背景适合任何屏幕尺寸的宽度,高度无关紧要.

这是我的图像的链接:

    ../IMAGES/background.jpg

编辑

我不知道什么是错的,但由于某种原因,身体甚至不想得到背景图像.它只显示纯白色背景.

body
{background-image:url(../IMAGES/background.jpg);}

我正在使用React开发一个Web应用程序,需要检测屏幕大小何时进入移动断点才能更改状态.具体来说,当用户进入移动模式并且使用存储在组件内状态的布尔值控制时,我需要将sidenav折叠.

我有一个背景包含一个表格的div.我希望div具有100%的宽度,除非它比表长的窄.我可以这样做:

.my-div {
  width:100%;
  min-width:900px;
}

这对于900px宽的表来说非常棒,但是如果它比那个窄,我会有不需要的滚动条,如果它比那更宽,我会有无法访问的内容.显然,这可以通过JavaScript轻松解决,但我想知道是否有一个只有CSS的解决方案,所以我的应用程序不是那么JS重.

有关正在发生的事情的视觉效果,请参见此处.我想要的是绿色背景在表格中的文本时溢出视口.

我有一个响应式网页,当您点按一个按钮时会打开一个模态.当模态打开时,它被设置为使用固定定位占据页面的整个宽度和高度.模态中还有一个输入字段.

在iOS设备上,当输入字段被聚焦时,键盘将打开.然而,在打开时,它实际上推动了完整的文档了出来,使得我的网页的一半以上去的视口顶部的方式.我可以确认实际的html标签本身已被推高以补偿键盘,并且它没有通过CSS或JavaScript发生.

有没有人见过这个,如果有的话,有没有办法防止它,或在键盘打开后重新定位的东西？这是一个问题,因为我需要用户能够在模态顶部看到内容,同时,我想自动聚焦输入字段.

我正在建立一个电子商务网站.所有产品都以不同的div显示.我有一个问题:在每个产品的Div中,我想显示产品描述的一部分.当产品描述比div长时,它只是在div的边缘显示描述.我试图将问题放在一张图片中:

现在,正如您在图片中看到的,我想解决三个问题:

• 我想限制文本以适应div.
• 我想确保这不是在一个单词中间的某个地方完成的
• 我想在说明预览的末尾添加"阅读更多"链接.

现在我在其他电子商务网站上看到了很多,但在找了几个小时后,我还没有找到关于如何做到这一点的清晰描述.

这是生成所有产品卡的代码:

for($i = 0; $i<$numberOfItems; $i++) {
    //echo $output_array[$i]["itemName"];
    echo '<a href="/itemDetails.php?itemCode=';echo $output_array[$i]["itemCode"]; echo '&itemName='; echo $output_array[$i]["itemName"];echo'">
    <div id="item" style="background-color: transparent; width:243px;height:auto;float:left; margin-left:20px; margin-top:20px; max-width:800px; display:inline-block;">
    <div id="itemPicture" class="itemImage"; > 
    <div id="price" class="pricetag">
    <div id="priceText" class="priceText";>';
    echo "€".$output_array[$i]["itemPrice"];

    echo '</div></div>';
    $imageSource = "http://www.imagine-app.nl/ProductImages/".$output_array[$i]["firstImage"].".jpg";
    echo '<img src="';echo $imageSource; echo'" style="max-width:100%; border:0px;"> 

    </div>

    <div id="itemName" class="itemName"">';
        echo $output_array[$i]["itemName"];
    echo '</div>'; ?>

    <div id="itemDescription" class="itemDescription" style="height:">
    <?  echo $output_array[$i]["itemDescription"];
    echo '</div>';
    ?>

    <?php
    echo '<div id="itemComment" class="itemComment""> …